javascript - 更改时的 Angular 选择值不更新

Question

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

正在使用正确的值更新模型，但模板未反射(reflect)更改。

模板 - 在阅读 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;
    }
}

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