angular 4 ngFor 在添加时不更新列表

Question

我有一个名为 "objective" 的对象，里面有一个对象列表 "keyresults"。每个 objective 都有一个关键结果列表。当我 select 一个 objective 时，我可以通过模式访问这个 objective 的关键结果列表。因此，在此模式中，我有一个可以添加新关键结果的字段，我只需输入名称并单击“添加”。但是，当我添加新的关键结果时，列表不会更新，我需要刷新页面并再次 select objective 才能看到新的关键结果。我希望列表更新并在我添加新的之后显示新的关键结果。我该怎么做？

我的html模态：

<div class="modal-body">
    <div class="col-md-9" style="float:left; border-right:solid">
        <b>{{itemSelected.title}}</b>
        <select [(ngModel)]="itemSelected.state" (change)="updateState(itemSelected.state)">
            >
            <option *ngFor="let item of states" [value]="item.Id">{{item.Name}}</option>
        </select>
        <p>{{itemSelected.description}}</p>
        <div>
            <b>{{itemSelected.dueDate}}</b>
            <b>{{itemSelected.ownerPersonName}}</b>
        </div>
        <br />

        <b>Key Results</b>
        <hr />
        <div *ngFor="let keyResult of itemSelected.keyResults">
            {{keyResult.description}}
        </div>

        <input [(ngModel)]="newKeyResult.description" type="text">

        <select [(ngModel)]="newKeyResult.metricType">
            <option *ngFor="let item of keyResultTypes" [value]="item.Id">{{item.Name}}</option>
        </select>

        <button type="button" (click)="addKeyResult(itemSelected.id)">Adicionar</button>
        <br />
        <div *ngIf="successKeyResult" class="alert alert-success">{{successKeyResult}}</div>
        <div *ngIf="errorKeyResult" class="alert alert-danger">{{errorKeyResult}}</div>
    </div>

我的TS方法：

private addKeyResult(objectiveId: any) {
    this.objectiveService.addKeyResult(objectiveId, this.newKeyResult).subscribe((ok) => {
        console.log(ok);
        this.successKeyResult = "KeyResult adicionado com sucesso";
    }, (error) => {
        this.errorKeyResult = this.objectiveService.getError(error.status);
    });
}

谢谢！！

更新

Hugo Noro 帮我解决了这个问题。我只需要在我的方法 "addKeyResult" 中添加两行以在保存后更新客户端列表：

this.itemSelected.keyResults = [...this.itemSelected.keyResults, this.newKeyResult];
this.newKeyResult = {};

像这样：

private addKeyResult(objectiveId: any) {
    this.newKeyResult.metricValueFrom = 0;
    this.newKeyResult.metricValueTo = 0;
    this.newKeyResult.actualValue = 0;
    this.newKeyResult.state = 0;

    this.objectiveService.addKeyResult(objectiveId, this.newKeyResult).subscribe((ok) => {
        console.log(ok);
        this.itemSelected.keyResults = [...this.itemSelected.keyResults, this.newKeyResult];
        this.successKeyResult = "KeyResult adicionado com sucesso";
        this.newKeyResult = {};
    }, (error) => {
        this.errorKeyResult = this.objectiveService.getError(error.status);
    });
}

Answer 1

好的，所以我的理解是您通过调用服务有效地在服务器上持久添加新密钥，但在保存后您没有更新客户端列表。

尝试这样的事情

private addKeyResult(objectiveId: any) {
this.objectiveService.addKeyResult(objectiveId, this.newKeyResult).subscribe((ok) => {
    this.itemSelected.keyResults = [...this.itemSelected.keyResults, this.newKeyResult];
console.log(ok);
    this.successKeyResult = "KeyResult adicionado com sucesso";
}, (error) => {
    this.errorKeyResult = this.objectiveService.getError(error.status);
});
}

angular 4 ngFor 在添加时不更新列表

angular 4 ngFor doesn't update list when add

angular2-template

angular