angular - 跟踪 Angular 5 中的变量变化

Question

我有一个简单的类，它将 checked 变量定义为 bool 值。然后我的组件有一个包含这些对象的数组，HTML 会显示每个对象。

<tr *ngFor="let element of filteredElements">
    <td>
      <input type="checkbox" [checked]="element.checked" (change)="onCheckChanged(element)">

现在我想添加一个显示值，告诉我在任何给定点检查了多少项。我不确定如何让组件“监视”所有这些元素。我可以从许多不同的地方更改 checked 的值。

我觉得我需要某种类型的 Observable，但我不确定如何实现它。

Answer 1

据我所知，有两种方法可以检测 Angular 类内部状态的变化。

方法一:

你负责检测。通过这种方式，您需要为类的任何成员设置 setter 和 getter，您需要了解他们的更改并发出事件。

import {EventEmitter} from '@angular/core';

export class ClassOne {
  private _state: boolean;
  stateChanged: EventEmitter<boolean> = new EventEmitter();

  set state(val: boolean) {
    this._state = val;
    this.stateChanged.emit(this._state);
  }

  get state(): boolean {
    return this._state;
  }

  stateChangedEmitter() {
    return this.stateChanged;
  }
}

然后您可以订阅 stateChangedEmitter 以进行任何进一步的操作。

方法二:

您可以通过实现 DoCheck 将变更检测委托(delegate)给 Angular

有关更多信息和示例，请访问 Angular ngDoCheck Life Cycle Hook