在 Angular 中过滤表单数组

Posted 2023-02-14

【中文标题】在 Angular 中过滤表单数组

【英文标题】：Filtering a Form Array in Angular

【发布时间】：2019-07-31 14:33:02

【问题描述】：

我有一个列表，我将其转换为 FormArray 以在 html 中生成按钮列表。我想按名称过滤汽车

CarComponent.html

  <input #searchBox id="search-box" (input)="search(searchBox.value)" />

<form [formGroup]="form" *ngIf="showCars">
              <input type="button" class ="btn"  formArrayName="carsList" *ngFor="let car of carsList$ | async; let i = index" value="carsList[i].name" >
        </form>

CarComponent.ts

 carsList$: Observable<Car[]>;
  private searchTerms = new Subject<string>();
  search(term: string): void 
    this.searchTerms.next(term);
  

constructor(private formBuilder:FormBuilder,...)

  this.form = this.formBuilder.group(
      carsList: new FormArray([])
    );

this.addButtons();



 ngOnInit() 
    this.spinner.show(); 
    this.carsList$ = this.searchTerms.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((term:string)=> 
      this.carsList ??? // Is this correct ?? What do I put here ?
    )




  

  private addButtons() 

      this.carsList.map((o,i)=>
        const control = new FormControl;
        (this.form.controls.carsList as FormArray).push(control);
      )
    

export const CarsList: Car[] = [
   name: 'Mercedes' ,
   name: 'BMW' ,
   name: 'Porsche' ,
   name: 'Cadillac' 
]

所以我想知道如何正确地进行过滤，而不是出于性能原因使用管道。

【问题讨论】：

为什么要使用 FormArray？如果我们有一个“输入”数组，而不是一系列“按钮”，则使用 FormArray

是this.carsList ??? 实际上是this.carsList$ 只是为了理解正确：您想根据提供的searchTerm过滤const CarList，然后为每辆找到的汽车生成按钮？

Arikael，是的。我想过滤包含所有汽车的 CarsList。 CarList$ 是一个包含过滤后的汽车的 observable。

【参考方案1】：

您可以使用数组filter 函数和数组includes 来过滤掉FormArray 或Array 中的值。

const CarsList = [
   name: 'Mercedes' ,
   name: 'BMW' ,
   name: 'Porsche' ,
   name: 'Cadillac' 
];
const result = CarsList.filter(s => s.name.includes('Mercedes'));

console.log(result);