Блог

Главная - Вопросы по программированию - Фильтрация массива форм в Angular

Фильтрация массива форм в Angular

#arrays #angular #forms #typescript #formarray

#массивы #angular #формы #typescript #formarray

Вопрос:

У меня есть список, который я преобразую в 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' }
]

Итак, я хотел бы знать, как правильно выполнить фильтрацию, не используя канал по соображениям производительности.

Комментарии:

1. почему вы используете FormArray? FormArray используется, если у нас есть массив «входных данных», а не серия «кнопок»

2. this.carsList ??? на самом деле this.carsList$ просто для правильного понимания: вы хотите const CarList отфильтровать в соответствии с предоставленным поисковым термином, а затем сгенерировать кнопки для каждого найденного автомобиля?

3. Арикаэль, да. Я хочу отфильтровать CarsList, который содержит все автомобили. CarList$ — это наблюдаемая величина, которая будет содержать отфильтрованные элементы.

Ответ №1:

Вы можете использовать filter функцию Array вместе с Array 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);