angular - 如果属性更新太快，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);
        }
    }

标签： angular