Question

我有一个名为＆＃34; objective＆＃34;有一个对象列表＆＃34;关键结果＆＃34;内。每个目标都有一个关键结果列表。当我选择一个目标时，我可以通过模态访问该目标的关键结果列表。所以，在这个模式中，我有一个字段，我可以添加一个新的键结果，我只需输入名称，然后单击添加。但是，当我添加一个新的keyresult，列表没有更新时，我需要刷新页面并再次选择目标以查看新的键结果。我希望列表更新并在添加新内容后显示新的键结果。我怎么能这样做？

我的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帮助我解决了这个问题。我只需要在我的方法中添加两行＆＃34; addKeyResult＆＃34;保存后更新客户端列表：

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 ng在添加时不更新列表

1 个答案: