我有一个自动完成字段,当我按下ENTER键时,它会检索数据库中的数据。但只有当我输入其他字符时,面板才会打开... 加载数据时,为了打开面板,我必须更改/添加什么? 这是我的组件HTML:
<mat-form-field class="index-full-width">
<input
matInput
type="text"
[(ngModel)]="patientChoice"
placeholder="Patient"
aria-label="Patient"
[matAutocomplete]="autoPatient"
[formControl]="myControl"
(keyup.enter)="getPatients($event)"
>
<mat-autocomplete (optionSelected)="selectPat()" #autoPatient="matAutocomplete" [displayWith]="displayFnPat">
<mat-option *ngFor="let patient of filteredPatients | async" [value]="patient">
<span>{{ patient.lastName }}</span>
<small>{{patient.firstName}}</small> |
<span>né(e) le {{ patient.dateNaissance }}</span> |
<small>IPP: {{patient.ipp}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
组件TS文件:
getPatients(event: any) {
let searchTerm = '';
searchTerm += event.target.value;
console.log(searchTerm);
let success: any = {};
this.klinckServices.getPatients(searchTerm)
.then((webScriptdata) => {
success = webScriptdata;
this.listPatients = success.data.items;
console.log(this.listPatients);
this.isResult = true;
console.log(this.autoCompleteInputAutoPatient);
// this.autoCompleteInputAutoPatient.openPanel();
},
msg => {
alert(msg);
});
}
角度材质文档显示了不同的函数和属性,如showPanel或isOpen,但我不了解如何使用它: https://material.angular.io/components/autocomplete/api
更新: 阅读这篇文章后How do you call closePanel in angular 4 autoComplete material 我更新了我的HTML组件:
<mat-form-field class="index-full-width">
<input #autoCompletePatientInput
matInput
type="text"
[(ngModel)]="patientChoice"
placeholder="Patient"
aria-label="Patient"
[matAutocomplete]="autoPatient"
[formControl]="myControl"
(keyup.enter)="getPatients($event)"
>
<mat-autocomplete #autoCompletePatient (optionSelected)="selectPat()" #autoPatient="matAutocomplete" [displayWith]="displayFnPat">
<mat-option *ngFor="let patient of filteredPatients | async" [value]="patient">
<span>{{ patient.lastName }}</span>
<small>{{patient.firstName}}</small> |
<span>né(e) le {{ patient.dateNaissance }}</span> |
<small>IPP: {{patient.ipp}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
这就是我在TS组件中添加的内容:
@ViewChild('autoCompletePatientInput', { read: MatAutocompleteTrigger} ) autoCompletePatient: MatAutocompleteTrigger;
...
getPatients(event: any) {
console.log(this.autoCompletePatient);
this.autoCompletePatient.openPanel();
let searchTerm = '';
searchTerm += event.target.value;
console.log(searchTerm);
let success: any = {};
this.klinckServices.getPatients(searchTerm)
.then((webScriptdata) => {
success = webScriptdata;
this.listPatients = success.data.items;
console.log(this.listPatients);
this.isResult = true;
},
msg => {
alert(msg);
});
}
但没有任何改变