如果属性更新过快，则UI控件无法反映模型更改

Question

我怀疑我在这里正在做一些顽皮的事情，但是我不清楚应该如何处理这种情况。

我有一个带有各种选项的选择控件。当用户选择一个选项时，我将进行检查以确定该值是否在可接受的范围内，否则，我将其强制为可接受的最小值。

发生的事情是选择控件动作异常。有时它将更新以显示新的边界值，而有时仅显示选择的值（尽管基础模型具有期望值）。但是，如果将检查和属性设置包装在setTimeout（）函数中，它将表现出预期的效果。

我尝试在设置值后注入changeDetectorRef并调用detectChanges，但这也不起作用。

演示该问题的示例代码：

    @Component({
        selector: 'my-app',
        template: `
    <form #form="ngForm">

        <div>
        <label>Select
            <select
            name="select"
            [(ngModel)]="selected"
            (ngModelChange)="onSelectChange()">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            </label>
        </div>
    <br/>
    <div>
        <label>Delayed Select
            <select
            name="delayedSelect"
            [(ngModel)]="delayedSelected"
            (ngModelChange)="onDelayedSelectChange()">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </label>
    </div>
    </form>
        `,
    })
    export class App {
        selected: string;
        delayedSelected: string;

        constructor() {    
        }

        onSelectChange():void {
            // nope! can't select 3, 2 is the highest you can go!
            if (this.selected === '3'){
                this.selected = '2';
            }
        }

        onDelayedSelectChange():void {
            setTimeout(()=>{
            // nope! can't select 3, 2 is the highest you can go!
            if (this.delayedSelected === '3'){
                this.delayedSelected = '2';
            }},0);
        }
    }