角度自动完成功能似乎无法正常工作

Question

我正在尝试使用具有自动完成功能的输入来执行以下表单，但我希望用户只能选择自动完成功能列表中的项目，但可以搜索要选择的项目：

<mat-form-field [hideRequiredMarker]="formTclimit.value.hideRequired" [floatLabel]="formTclimit.value.floatLabel" class="col-4">
   <input class="search" type="text" matInput formControlName="codename" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{'placeholder.search'|translate}}" (click)="searchStation()" [matAutocomplete]="tclstation" (change)="validateSelectedStation($event.target.value)">
</mat-form-field>
<mat-autocomplete class="col-4" #tclstation="matAutocomplete">
   <mat-option *ngFor="let item of filteredListStations | async" [value]="item.codename" (click)="onChangeStation(item.stationcode, item.stationname, item.codename)">{{item.codename}}</mat-option>
</mat-autocomplete>

问题在于，当自动完成过滤时，并非总是触发点击事件（在mat-option上），而更改事件（在输入上）总是被触发。

有关任何想法？有没有一种方法可以使点击优先于更改？

预先感谢

Answer 1

由于您使用的是反应式表单，因此建议您监听表单控件valueChanges事件，该事件在选择选项时都会触发。

ngOnInit() {  
   this.myForm.get('codename').valueChanges.subscribe( val => console.log(val));
}