Флажок Угловой Материал Двусторонняя привязка - PullRequest
Новая
       19

Флажок Угловой Материал Двусторонняя привязка

0 голосов
/ 29 сентября 2018

У меня есть вопрос о том, как работает двусторонняя привязка в Angular Material.

Это шаблон HTML из app.component.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>

В отличие от своих соседей над ниминикогда не проверяются.

1 Ответ

0 голосов
/ 29 сентября 2018

Значение может быть сброшено слишком быстро, когда Angular не завершил цикл обнаружения изменений, вызванный щелчком.Это работает, если мы сбрасываем значение асинхронно с setTimeout (см. this stackblitz ): 

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

или если мы вызываем ChangeDetectofRef.detectChanges() перед сбросом значения (см. thisstackblitz ): 

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