Select 控件不从双向绑定中获取值

Question

我有以下 select 控件：

<select id="my-select" [(ngModel)]="available" (change)="handleChange($event)">
    <option value="true">Available</option>
    <option value="false">Unavailable</option>
  </select>

我正在使用两种方式绑定到名为 available 的属性。我想要的是让用户能够设置状态 available/unavailable，后端方法将调用 API，如果失败，它将显示一条错误消息并设置 select 控制回到它之前的状态。

为了测试这一点，我做了以下组件：

import { TextAttribute } from "@angular/compiler/src/render3/r3_ast";
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  available: boolean;
  ngOnInit(): void {
    this.available = false;
  }

  async handleChange(event: Event) {
    // ... some process to set status
    //oops error happened setting status, lets set it back
    this.available = false;
    console.log(event);
  }
}

堆栈闪电战：https://stackblitz.com/edit/angular7-playground-sapjc8?file=src/app/app.component.ts

我希望发生的是用户 select 可用，然后它会立即设置回不可用，但是设置 available 属性不会更改下拉列表.

我对 angular 绑定有什么误解？

Answer 1

原因是available的值恰好在handleChange发生了变化，但是在change detection循环之后，就足够你使用setTimeout

async handleChange(event: Event) {
  // ... some process to set status
  //oops error happened setting status, lets set it back
  setTimeout(() => {
    this.available = false;
    console.log(event);
  }, 0)
}

Select 控件不从双向绑定中获取值

Select control not taking value from two way binding

angular

angular7