angular 4 ngForは追加時にリストを更新しません

Question

"objective"というオブジェクトが内部にオブジェクト "keyresults"のリストを持っています。あらゆる目的には、主要な結果のリストがあります。目的を選択すると、私はこの目的のキー結果のリストにモーダルでアクセスできます。したがって、このモーダルでは、新しいキー結果を追加できるフィールドがあります。名前を付けて[追加]をクリックするだけです。しかし、私は新しい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); 
    }); 
} 

感謝!!

UPDATE

ヒューゴ野呂は、ソリューションで私を助けました。このよう

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

：私はちょうどそれを保存した後、クライアント側のリストを更新するために、私の方法「addKeyResult」の2行を追加する必要があり

ここに私の理解は、あなたが効果的であるということですので、

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

OKサービスを呼び出すことによってサーバー上に新しいキーの追加を維持しますが、クライアント側のリストを保存した後は更新しません。あなた `addResult`コールがあなたのバックエンドから受信しているかを返すとき

この

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); 
}); 
}