Angular 管道长度结果

Question

我正在使用管道，因此我可以按给定的属性过滤数组。假设它是一个 id。

<div #objs *ngFor="let obj of (arrayOfObj | pipe : search)">
   ...
</div>

我还向包含数组的元素添加了一个 ViewChildren。

@ViewChildren("objs") objs;

这是控制管道的输入：

<input type="text" [(ngModel)]="search" (ngModelChange)="inputSearch()">

这个inputSearch()函数应该简单地控制一个数字变量，每次输入值改变时过滤数组的长度：

inputSearch(){
    this.lengthFilteredArray = this.objs.length;
    console.log(this.objs);
}

此外，如果我记录 objs 它包含一个奇怪的结果，它有两种不同的长度（我需要第二个结果，即 0）：log result

下面是管道的transform()：

transform(array: Array<any>, search: string)
    {
      if (!array|| !search) {
        return array;
      }

      return array.filter(o =>
        o.name.toLowerCase().indexOf(search.toLowerCase()) !== -1);
    }

通过这种方法，我得到了一个“延迟”的结果。当我键入一个字符时，只有在我键入下一个字符后，我才能收到所需的结果。示例：我键入“x”，lengthFilteredArray 为 4，但数组被过滤为 0。如果我删除“x”，lengthFilteredArray 为 0，甚至没有过滤数组。

我不知道这是否是解决此问题的最佳方法。

Answer 1

问题是您正在检查“search 变量”中 ngModelChange 的长度，到那时 this.objs 尚未完成处理或管道尚未返回过滤操作数据。

当管道返回过滤数据（这里没有事件）或当 ngFor 处理完数据（在 [=14 中有事件）时，你必须检查结果=])

stackblitz example

  export class AppComponent implements AfterViewInit {

  @ViewChildren('objs') objs: QueryList<any>;

  ngAfterViewInit(): void {
    this.objs.changes.subscribe((obj) => this.log(obj));
  }

  log = (q) => console.log(q); // in your case check q.length here not on search change
}

Angular 管道长度结果

Angular pipe length result

pipe

angular