出于性能原因,要在不使用管道的情况下过滤汽车列表,您可以直接过滤组件代码中的数组。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, FormArray } from '@angular/forms';
import { Observable, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
interface Car {
name: string;
}
const CarsList: Car[] = [
{ name: 'Mercedes' },
{ name: 'BMW' },
{ name: 'Porsche' },
{ name: 'Cadillac' }
];
@Component({
selector: 'app-car',
templateUrl: './car.component.html',
styleUrls: ['./car.component.css']
})
export class CarComponent implements OnInit {
form: FormGroup;
carsList$: Observable<Car[]>;
showCars = true;
private searchTerms = new Subject<string>();
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
carsList: new FormArray([])
});
}
ngOnInit() {
this.addButtons();
this.carsList$ = this.searchTerms.pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap((term: string) => {
return this.filterCars(term);
})
);
}
private addButtons() {
CarsList.forEach((car: Car) => {
const control = new FormControl();
(this.form.controls.carsList as FormArray).push(control);
});
}
private filterCars(term: string): Observable<Car[]> {
const filteredCars = CarsList.filter((car: Car) =>
car.name.toLowerCase().includes(term.toLowerCase())
);
return new Observable<Car[]>(subscriber => {
subscriber.next(filteredCars);
subscriber.complete();
});
}
search(term: string): void {
this.searchTerms.next(term);
}
}
在上面的代码中,我们删除了
carsList
observable,而是直接使用 CarsList
数组。然后实现 filterCars
方法来根据搜索词过滤汽车。在 ngOnInit
中,我调用 addButtons
用每辆车的按钮填充表单数组。并且 search 方法用于当用户在搜索框中输入文本时触发搜索。