Angular 如何过滤表格中显示的角度阵列数据

当我在名称输入字段中键入名称以过滤FormArray数据时， 并对数组数据控件的输入框表单中键入的内容进行排序

---

您可以使用管道过滤角度阵列数据

<input type="text" placeholder="Search" 
    [(ngModel)]="searchText"/>

      <tr *ngFor="let card of cardsArray |filter:searchText ">

---

可观察到的救援！：）

将表单控件附加到搜索字段，侦听其更改并过滤值。返回一个可观察到的模板，并在那里使用异步管道。下面是一个示例，您只需更改变量名称以满足您的需要：

表单控件的输入：

<input [formControl]="searchCtrl" placeholder="Search"/>

然后监听组件中的更改，并执行上述过滤器。如果用户输入速度快，我喜欢在制作过滤器之前稍微去盎司一点

然后过滤后的

formArr$

变量（可观察）：

formArr$=this.searchCtrl.valueChanges.pipe(
startWith（“”），
去BounceTime（300），
开关映射（（val:string）=>{
返回（this.formArr作为AbstractControl[]）管道(
映射（（formArr:AbstractControl[]）=>
formArr.filter（（组：AbstractControl）=>{
返回组.get（'formCtrl'）.value
.toLowerCase（）
。包括（val.toLowerCase（））；
})
)
);
})
);

然后只需在模板中使用

async

管道：

---

就这样！这是一个，上面的代码am使用了最新的角度，因此其在映射上突出显示错误（ts（2345））=>类型为“未知[]”的参数不能分配给类型为“运算符函数”的参数。类型“unknown[]”与签名不匹配（源：Observable）：Observable“尝试使用AbstractControl，它是基类：

map（（formArr:AbstractControl[]）

还：

返回（this.formArr as AbstractControl[]）.pipe（

    searchText : string;

<input [formControl]="searchCtrl" placeholder="Search"/>