Angular 7材质自动完成选项未显示

时间:2020-11-10 20:09:40

标签: angular angular-material angular7

我使用的是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, '');
}

DevTools: enter image description here

0 个答案:

没有答案