Question

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

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

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

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

Answer 1

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

方法1：

您负责检测。这样，您需要为类的任何成员设置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以进行任何进一步的操作。

方法2：

您可以通过实施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中的变量变化

2 个答案: