更改时的角度选择值未更新答案

【问题标题】：Angular select value on change not updating更改时的角度选择值未更新
【发布时间】：2020-01-22 23:35:38
【问题描述】：

当select 更改时，将值更改为选定以外的其他值。我有一项功能，一次只能选择 4 种项目类型，如果选择超过 4 种，它会将值更改回更改前的值。

正在使用正确的值更新模型，但模板未反映更改。

模板 - 阅读 Select change event occurs before ngModel updates on angulars github. 后，我已从 (change) 更改为 (ngModelChange)

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

【问题讨论】：

你会把你的作品发到stackblitz.com吗？
@TheKNVB 这里是代码的粗略设置 - stackblitz.com/edit/angular-e3macv
changeJobItemReplacementType(jobItem, $event) 需要两个参数，第二个不是更改事件。
@TomShaw $event 是新的模型值

标签： javascript html angular typescript angular6

【解决方案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)
  });
}

【讨论】：