設置變量時Angular ngModel不更新

Question

我正在使用Angular 4和Typescript，我的模板中有一個<select>的表：

<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>

在另一個組件中，我可以添加/刪除到工作人員列表，並將其輸出到該組件訂閱的Subject ：

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

問題在於，盡管訂閱更新了變量中的字段，但是ngModel不會選擇更改並將其反映在UI中。

因此，我們最終遇到了以下情況： ng-reflect-model顯示為“ 11”，worker變量為空字符串，並且由於“ 11”選項已被刪除，因此select顯示為空白。

如何使Angular使模型與訂閱中所做的更改保持同步？ 我試圖在一個包裹它NgZone.run()和還呼吁ChangeDetectorRef.detectChanges()但沒有將更新的ng-reflect-model的價值。

這是一個重現錯誤的Plunker

Answer 1

我找到了解決方案，這要感謝yurzui向我指出了正確的方向：

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

更改為

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

這樣嚴格的相等就是比較數字。 表單輸入將值轉換為字符串。 有時簡單的人可以得到。