Angular 的 select 组件的值改变时没有更新

Question

当选择（select）被更改时，将值更改为除所选项之外的其他内容。我有一个特性，每次只能选择4种项目类型，如果选择了超过4个，则将值更改回更改之前的值。

模型正在使用正确的值进行更新，但模板没有反映出这种更改。

模板 - 我已经从(change)更改为(ngModelChange)，在阅读Angulars Github上的选择更改事件发生在ngModel更新之前。后做出更改。

<tr *ngFor="let jobItem of job.jobItems">
    <td>
        <select 
            [disabled]="job.completed" 
            [(ngModel)]="jobItem.supplierType"
            (ngModelChange)="changeJobItemReplacementType(jobItem, $event)">
                <option *ngFor="let supplierType of supplierTypes" [ngValue]="supplierType">
                    {{ supplierType }}
                </option>
        </select>
    </td>
</tr>

事件

changeJobItemReplacementType(jobItem: JobItem, supplierType: string) {
        // THIS IS UPDATING BUT NOT REFLECTING IN TEMPLATE
        jobItem.supplierType = jobItem.originalValues.supplierType;
    }
}

- Bankzilla

---

你能把你的工作发布到 https://stackblitz.com/ 吗？ - The KNVB

@TheKNVB 这是代码的粗略设置-https://stackblitz.com/edit/angular-e3macv - Bankzilla

changeJobItemReplacementType(jobItem, $event) 需要两个参数，第二个不是更改事件。 - Tom Shaw

@TomShaw $event 是新的模型值。 - Bankzilla

Answer 1

我使用了您的StackBlitz设置。通过添加setTimeout，使其正常工作，代码如下：

changeJobItemReplacementType(jobItem: JobItem, supplierType: string) {
  console.log('changed value to: ', supplierType)
  console.log('jobItem current: ', jobItem)
  setTimeout(() => {
    jobItem.supplierType = jobItem.originalValues.supplierType;
    console.log('jobItem.supplieType modified back to original: ',jobItem)
  });
}

- Stratubas