我使用的是angular page中的确切代码,唯一的区别是我使用的是Angular 7和@ angular / material 7。
component.html:
<!-- added to see that value is changing -->
<li *ngFor="let street of filteredStreets | async">{{street }}</li>
<form class="example-form">
<input type="text"
matInput
placeholder="Search for a street"
[formControl]="control"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let street of filteredStreets | async" [value]="street">
{{street}}
</mat-option>
</mat-autocomplete>
</form>
component.ts:
control = new FormControl();
streets: string[] = ['Champs-Élysées', 'Lombard Street', 'Abbey Road', 'Fifth Avenue'];
filteredStreets: Observable<string[]>;
constructor() {
this.filteredStreets = this.control.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: string): string[] {
const filterValue = this._normalizeValue(value);
return this.streets.filter(street => this._normalizeValue(street).includes(filterValue));
}
private _normalizeValue(value: string): string {
return value.toLowerCase().replace(/\s/g, '');
}