angular - How to set filter with mat auto select in angular template driven form
问题描述
How to set filter with mat auto select in angular template driven form.
<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>
Please see stackblitz example: click here
解决方案
您可以使用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
推荐阅读
- xpath - XPath query for importing web content
- java - How to create folder in root folder of the project?
- ios - 如何在 SwiftUI 中将渐变前景色文本移动到视图的中心?
- flutter - How to make a DataTable in a Positioned inside of a Stack scrollable
- typescript - How exactly do Protractor's ExpectedConditions work (related to behaviour on a non-angular site)?
- android - android.permission.READ_PROFILE in Android, what it does?
- java - Delete a particular item from a container in cosmos db java
- sql - SQL - Looking for a specific name without going through all the table
- python - 在按升序排序的整数列表中添加缺失的数字
- python - 使用 pandas 和 pandastable 将值插入选定的单元格