跟踪 Angular 5 中的变量变化

Question

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

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

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

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

Answer 1

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

方法一：

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

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

将变更检测委托给 Angular

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

Answer 2

您只需要创建一个 getter 来计算选中元素的数量并将其绑定到您的组件模板中。 Angular 将在每次更改检测交互时调用它并更新显示的值。所以在你的组件中是这样的：

get checkedTotal() {
    var count = 0;
    for(var i = 0; i < this.filteredElements.length; ++i){
        if( this.filteredElements[i].checked )
            count++;
    }
    return count;
}

并在您的组件模板中添加

Checked: {{checkedTotal}}

跟踪 Angular 5 中的变量变化

Track variable change in Angular 5

observable

angular

angular5