2017-05-25 9 views
0

を設定するとき、私は私のテンプレートで<select>秒のテーブルを持って更新していない:角度ngModelは、私は角度4と活字体を使用しています変数

<tr *ngFor="let task of tasksDetails"> 
    <td>{{task.name}}</td> 
    <td> 
     <select class="form-control" [(ngModel)]="task.uiMetadata.worker"> 
      <option value="">Select worker</option> 
      <option *ngFor="let worker of workers" [value]="worker.resource.id">{{worker.resource.name}}</option> 
     </select> 
    </td> 
</tr> 

私は労働者のリストに追加/削除することができています別のコンポーネント内で

this.workerRemoved.subscribe(worker => { 
    _each(this.tasksDetails, taskTemplate => { 
     if (taskTemplate.uiMetadata.worker === member.resourceId) { 
      taskTemplate.uiMetadata.worker = ''; 
     } 
    }); 
}); 

問題は、サブスクリプションは、変数にフィールドを更新しながら、ngModel変更をピックアップし、UIのそれを反映していないということである:それは、このコンポーネントは、購読Subjectに出力されます。 「11」オプションが削除されているため

Chrome DevTools output

だから我々はng-reflect-modelは「11」を示しているような状況になってしまい、労働者の変数は空の文字列、および空白として選択を示しています。

サブスクリプションで行った変更とモデルを同期させるにはどうすればよいですか?私はNgZone.run()でそれをラップし、またChangeDetectorRef.detectChanges()を呼び出すことを試みましたが、いずれもng-reflect-model値を更新しませんでした。

Here is a Plunker reproducing the error

+0

問題を再現するためにプランナーを作成できますか? – echonax

+0

@echonaxはPlunker – BeaverusIV

+1

へのリンクを追加しましたhttps://plnkr.co/edit/SGbhsySRZAxWgWuANCwC?p=preview – yurzui

答えて

1

私は解決策のおかげで正しい方向に私を指してyurzuiすることが分かっ:

if (+taskTemplate.uiMetadata.worker === +member.resourceId) { 

if (taskTemplate.uiMetadata.worker === member.resourceId) { 

変更を厳密な等価の数を比較されるようになっています。フォーム入力は値を文字列に変換していました。時には簡単なものは後で取得することができます。

関連する問題