过滤器关键字的ngModel更改未触发异步数组上的过滤器管道答案

【问题标题】：filter pipe on async array not triggered by ngModel change of filter keyword过滤器关键字的ngModel更改未触发异步数组上的过滤器管道
【发布时间】：2020-12-15 04:11:17
【问题描述】：

我有以下过滤管道：

import { Pipe, PipeTransform } from '@angular/core';
import { Filterable } from './models/filterable.model';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

transform(value: Filterable[], ...args: string[]): unknown {
  console.log("Filter:", args[0]);
  if(value && args[0] && args[0].length>2){
    return value.filter(item => item.name.toLowerCase().includes(args[0].toLowerCase()));
  }
  return value;
}

}

管道在 html 中是这样使用的：

<app-card *ngFor="let p of projects | async | filter:filterString" headline="{{p.name}}" subHeadline="{{p.leader}}" content="{{p.description}}"></app-card>

并且 filterString 像这样绑定到 ngModel：

<input matInput [(ngModel)]="filterString" placeholder="filter">

但是当我在输入中输入内容时，控制台日志永远不会被触发。如何在 ngModel 的 keyup/change 上触发管道过滤？

【问题讨论】：

你能在 stackblitz 中重现它吗？
你可以检查这个答案stackoverflow.com/questions/39285550/…

标签： angular

【解决方案1】：

好的，我好像忘了补充：

从“@angular/forms”导入 { FormsModule }；到 app.module

（然后将其添加到导入中）

我很惊讶在控制台中添加它之前没有收到任何错误，但现在它可以完美运行了。

【讨论】：