如何筛选显示在 table 中的 angular FormArray 数据

Question

我想在名称输入字段中键入名称时过滤 FormArray 数据，并根据 FormArray 数据控件中输入框输入的内容进行排序

 <tbody formArrayName="cards">
                  <tr class="custom" *ngFor="let card of cardsArray().controls; index as i; " [formGroupName]="i">
                    <td class="pr-0">
                      <input [attr.id]="'name'+i" class="form-control form-control-sm" formControlName="name"
                        [readonly]="true">
                    </td>
                    </tr>
                    </tbody>

Answer 1

您可以使用管道过滤 angular FormArray 数据

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

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

在components.ts

    searchText : string;

Answer 2

Observable 来拯救！ :)

将表单控件附加到您的搜索字段，监听它的变化并过滤值。 Return 模板的可观察对象并在那里使用异步管道。这是给您的示例，您只需更改变量名称以满足您的需要：

带表单控件的输入：

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

假设您的表单如下所示：

this.myForm = this.fb.group({
  formArr: this.fb.array([
    this.fb.group({
      formCtrl: ['one']
    }),
    //... more
  ])
});

// just a getter for your formarray
get formArr() {
  return (this.myForm.get('formArr') as FormArray).controls;
}

然后在组件中监听变化并执行上述过滤器。如果用户键入速度快，我喜欢在制作过滤器之前放置一个轻微的去抖动时间。

然后过滤后的 formArr$ 变量（这是一个可观察的）：

formArr$ = this.searchCtrl.valueChanges.pipe(
  startWith(''),
  debounceTime(300),
  switchMap((val: string) => {
    return of(this.formArr as AbstractControl[]).pipe(
      map((formArr: AbstractControl[]) =>
        formArr.filter((group: AbstractControl) => {
          return group.get('formCtrl').value
           .toLowerCase()
           .includes(val.toLowerCase());
        })
      )
    );
  })
);

然后只需使用模板中的 async 管道：

<div *ngFor="let group of formArr$ | async; let i = index">
  <div formArrayName="formArr">
    <div [formGroupName]="i">
      <input formControlName="formCtrl">
    </div>
  </div>
</div>

就是这样！这是一个 DEMO 上面的代码

如何筛选显示在 table 中的 angular FormArray 数据

How to filter angular FormArray data which is displayed in a table

angular

angular-reactive-forms

formarray