angular - Angular 自动完成功能似乎无法正常工作

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 上）并且总是触发 change 事件（在输入上）。

有什么想法吗？有没有办法让点击优先于更改？

提前致谢

Answer 1

由于您使用的是响应式表单，我建议您收听表单控件valueChanges事件，该事件将在选择选项时触发。

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