javascript - 设置变量时，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 不会获取更改并将其反射(reflect)在 UI 中。

所以我们最终会遇到 ng-reflect-model 的情况显示“11”，worker 变量是一个空字符串，并且选择显示为空白，因为“11”选项已被删除。

如何让 Angular 使模型与我在订阅中所做的更改保持同步？我尝试将它包装在 NgZone.run() 中还可以调用ChangeDetectorRef.detectChanges()但两者都不会更新 ng-reflect-model值。

Here is a Plunker reproducing the error

Answer 1

感谢 yurzui 为我指明了正确的方向，我找到了解决方案:

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

更改为

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

所以严格相等就是比较数字。表单输入正在将值转换为字符串。有时简单的事情就能得到你的帮助。