如何在 angular 模板驱动表单中使用 mat auto select 设置过滤器

Question

如何在 angular 模板驱动表单中使用 mat auto select 设置过滤器。

<mat-form-field class="pl">
    <input matInput name="item_id" 
    [(ngModel)]="stock.item_id" 
    #item_id="ngModel" 
    placeholder="Item"           
    [matAutocomplete]="auto" required>
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="valueMapper">
        <mat-option *ngFor="let item of itemsData" [value]="item.id">
        {{item.text}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

请参阅 stackblitz 示例：click here

Answer 1

您可以使用 ngModelChange 事件来捕获自动完成输入中的更改，并使用该事件来过滤您的项目数组。

<input matInput name="item_id" [(ngModel)]="selected_item_id" #item_id="ngModel"
    placeholder="Item" [matAutocomplete]="auto" required
    (ngModelChange)="applyFilter($event)">

这是工作演示：

https://stackblitz.com/edit/angular8-material8-select-and-autoselect-ett7id

如何在 angular 模板驱动表单中使用 mat auto select 设置过滤器

How to set filter with mat auto select in angular template driven form

angular

mat-autocomplete

angular8