Angular Material Checkbox 双向绑定

Question

我有一个关于 Angular Material 复选框中双向绑定如何工作的问题。

这是来自app.component.html的HTML模板：

<div>
  <div *ngFor="let data of testData">
      <mat-checkbox [(ngModel)]="data.isActive" (change)="handleData(data)">{{data.isActive}}</mat-checkbox>
  </div>
</div>

这是组件（app.component.ts）：

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  testData: TestData[];

  ngOnInit() {
    this.testData = [];

    this.testData.push({
      label: 'testData1',
      isActive: false
    });

    this.testData.push({
      label: 'testData2',
      isActive: false
    });
  }

  handleData(data: TestData) {
    console.log(data.isActive);
    data.isActive = false;
  }
}

export class TestData {
  label: string;
  isActive: boolean;
}

默认情况下未选中所有复选框。当我第一次单击复选框时，handleData 处理程序中的data 参数在data.isActive 中接收true。之后我将其设置为false。相应的标签永远不会改变（它们总是false）。但我也希望复选框永远不会被选中。但它确实被检查了。为什么会这样？

更新 我刚刚添加了包含反映上述复选框的“结果”部分：

<div>
  <div *ngFor="let data of testData">
      <mat-checkbox [(ngModel)]="data.isActive" (change)="handleData(data)">{{data.isActive}}</mat-checkbox>
  </div>
</div>

<h2 class="example-h2">Result</h2>

<div>
  <div *ngFor="let data of testData">
    <mat-checkbox [(ngModel)]="data.isActive" (change)="handleData(data)">{{data.isActive}}</mat-checkbox>
  </div>
</div>

与上面的邻居不同，他们永远不会被检查。

Answer 1

当 Angular 没有完成由点击触发的变化检测周期时，该值可能被重置得太快。如果我们使用setTimeout 异步重置值，它会起作用（请参阅this stackblitz）：

handleData(data: TestData) {
  console.log(data.isActive);
  setTimeout(() => {
    data.isActive = false;
  });
}

或者如果我们在重置值之前调用ChangeDetectofRef.detectChanges()（参见this stackblitz）：

handleData(data: TestData) {
  console.log(data.isActive);
  this.changeDetectorRef.detectChanges();
  data.isActive = false;
}