Question

页面首次启动时没有错误，在搜索输入中键入单个字母后，我得到一个：

。 ExpressionChangedAfterItHasBeenCheckedError：表达式已更改经过检查后。上一个值：“未定义：”。当前值： “未定义：c”。

过滤器也可以正常工作，直到我键入三个字母，然后它停止过滤，直到我转到另一页并返回它的反应后，过滤器才起作用。

过滤字符串在另一个组件中，该组件通过reducer设置过滤字符串，并在调用实际列表的位置进行订阅，事实证明该列表成功获取了字符串。

谢谢。

我尝试在管道中将条件设置为不允许，如果提供的任何值都为null以及在订阅中也不允许通过。

HTML

<tr *ngFor="let shoe of products | filter:filteringString:'model'; let i = index;">
  <th>{{ i + 1 }}</th>
  <td>{{ shoe.model }}</td>
  <td>{{ shoe.size }}</td>
  <td>{{ shoe.color }}</td>
  <td>{{ shoe.status }}</td>
  <td>{{ shoe.quantity }}</td>
  <td>{{ shoe.creationDate }}</td>
</tr>

ts文件

ngOnInit() {
  this.obtainShoes();
}
ngOnDestroy(): void {
  this.storeSub.unsubscribe();
}

obtainShoes = () => {
  this.storeSub = this.store.select('StockReducer').subscribe( 
  stockState => {
      this.products = stockState.stock;
      this.filteringString = stockState.filterString;
      console.log('filtering string is, ', this.filteringString);
  });
}

PIPE

transform(value: any, filterString: string, propName: string): any {
    if (value.length === 0 || !filterString || !propName) {
      return value;
    }

    return value.filter((product) => {
      const re = new RegExp(filterString, 'gi');
      return re.test(product[propName]);
    });
}

我希望它只过滤数组并相应地向我显示结果，并在过滤字符串再次为”时向我显示整个列表。

使用Ngrx的过滤器管道无法正常工作

0 个答案: