在 Angular 中过滤表单数组答案

【问题标题】：Filtering a Form Array in Angular在 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。

标签： arrays angular forms typescript formarray

【解决方案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);

【讨论】：