时间戳

首页 > 解决方案 > onPush 更改检测的问题

angular - onPush 更改检测的问题

问题描述

我正在尝试在我的一个组件中实现 onPush 更改检测

组件.html

<ul>
  <li *ngFor="let data of data" [innerHTML]="getName(data)"></li>
</ul>

组件.ts

getData() {
  this._store.select('data')
    .subscribe(result => {
      this.DATA = result;
      this.sortData();
    });
}

getFilters() {
  this._store.select('filters')
    .subscribe(result => {
      this.filters = result;
      this.sortData();
    });
}

sortData() {
  this.data = Array.from(new Set(this.DATA.filter(x => ... filters));
}

getName(data) {
  return `Super Cool ${data.name}`;
}

但我似乎无法弄清楚。

基本上我有数据进入，用户可以过滤这些数据，现在每次过滤数据或收到新数据时，它应该触发 onPush 更改检测并更新 html 页面上的列表。但它不起作用。 .

现在我知道异步管道但我不确定在这种情况下我将如何实现它

任何帮助，将不胜感激

编辑

我知道要触发更改检测，您需要更新对象引用，但这不是什么

this.data = Array.from(new Set(this.DATA.filter(x => ... filters));`

是在做？？

标签： angulartypescriptangular-changedetection

解决方案

对象更改不会在推送更改检测时触发，这仅适用于组件输入。你想要在这里做的是使用异步管道

 ngOnInit() {
   this.data$ = this._store.select('data').pipe(
     map(d => Array.from(new Set(d)))
   )
 }

然后在您需要数据的某个地方的模板中：

 <ng-container *ngIf=“data$ | async as DATA”&gt;

异步管道总是在推送时触发

推荐阅读