我希望用户能够输入关键字以过滤输入字段中菜单项中的项目。我无法插入ngModel,想知道是否可以解决此问题?也应该不使用按钮来动态完成
<div class="launch-switch-popup" [class.hidden]="!isActive">
//INPUT OF SOME SORT GOES HERE
<div class="launch-switch-item" *ngFor="let item of menuItems">
<img class="icon" [src]="item.icon">
<p class="launch-switch-title">{{item.text}}</p>
<br>
<div class="plugin-row" *ngFor="let child of item.children" (click)="clicked(child)">
<p>{{child.text}}</p>
</div>
</div>
</div>
答案 0 :(得分:0)
HTML:
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
TS:
myControl = new FormControl();
options: string[] = ['One', 'Owo', 'Ohree','Ope', 'Owk', 'Oyree'];
filteredOptions: Observable<string[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.toLowerCase().includes(filterValue));
}