Angular 带有Ngrx的过滤管工作不正常

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

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

另外，过滤器工作，直到我键入三个字母，然后它停止过滤，直到我转到另一页并返回，它才作出反应

过滤字符串位于另一个组件中，该组件通过一个减缩器设置过滤字符串，并在调用实际列表的位置订阅，在该组件中，已证明可以成功获取该字符串

先谢谢你

我已尝试将管道中的条件设置为，如果提供的任何值为null并且在订阅中，则不允许通过

HTML

烟斗

---

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

您是否使用

OnPush

策略？您是否可以为其创建stackblitz？

<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>

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);
  });
}

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]);
    });
}