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

默认情况下，所有复选框均未选中。当我第一次单击复选框时，data处理程序中的handleData参数在true中收到data.isActive。之后，我将其设置为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;
}

角度材质复选框双向绑定

1 个答案: