Angular select 更改时的值未更新

Question

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

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

Angular select 更改时的值未更新

Angular select value on change not updating

html

javascript

typescript

angular

angular6