如何在Angular内部状态改变时触发控制器方法？

Question

当内部数据模型更改时，我该如何让我的Angular组件调用绑定的方法（在此示例中为isItemExpended）？

TypeScript

@Component({
  ...
})
export class ItemsComponent implements OnInit {
  ...

  private expandedItems: Item[] = [];

  public isItemExpanded(item: Item): boolean {
    return this.expandedItems.indexOf(item) > -1;
  }
 
  ...
}

HTML

<ng-container *ngFor="let item of items">
  <div *ngIf="isItemExpanded(item)">
    ...
  </div>
</ng-container>

注意：在我的解决方案中，isItemExpanded的实现有点更加复杂，这就是没有直接在HTML中使用该条件的原因。

- dhrm

---

这里正在更改哪个数据模型？ - smtaha512

只需调用changedetectorRef.markForCheck方法即可触发变更检测。 - EvgenyV

Answer 1

@Component({
  ...
})
export class ItemsComponent implements OnInit {
  ...
  constructor(private cd: ChangeDetectorRef){}

  private expandedItems: Item[] = [];

  public isItemExpanded(item: Item): boolean {
    return this.expandedItems.indexOf(item) > -1;
  }
  private listenModel() {
     model.changed$.subscribe() {this.cd.markForCheck()}
  }
  ...
}

- EvgenyV