我正在尝试使用MatAutocomplete和Angular 5,我完全按照他们在材料文档中提到的那样实现它,基于材料文档,我 可以使用(onSelectionChange)知道何时选择一个选项,问题是我无法找到一种方法来知道该选项何时被取消选中。 例如,当用户清除搜索控件时,没有事件触发更新模型,请提供任何帮助。
这是我的代码示例
<mat-form-field class="example-full-width" >
<input matInput placeholder="Select a item" [matAutocomplete]="auto" [formControl]="autoCompleteCtrl">
<mat-autocomplete #auto="matAutocomplete" ngDefaultControl [displayWith]="getDisplayFn()" >
<mat-option *ngFor="let item of filteredItems | async" [value]="item" (onSelectionChange)="selectionChange(item)">
{{ item.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
打字稿代码
selectedItem: any();
public getDisplayFn() {
return (val) => this.display(val);
}
public display(item: Item): string {
if (item) {
return item.name;
}
}
public selectionChange(item) {
//this is fired when an option becomes selected ,
//I need a way to clear selecedItem if the user clear the control
this.selecedItem = item;
}