我有一个材料自动完成。
我正在调用 ngrx 来提取数据。
//parentcomponent.ts
this.store.select(fromStore.getSearchFormStateMessageTypeListData).subscribe(msgTypeList => {
if (msgTypeList.length > 0) {
console.log('msgtypelist ='+msgTypeList)
for (var i = 0; i < msgTypeList.length; i++) {
this.messageTypeList.push(msgTypeList[i]);
}
}
else {
this.store.dispatch(new fromStore.GetGlobalSearchMessageTypeList({}));
}
})
//parentcomponent.html
<mat-card style="margin: 1px;">
<search-form [messageTypeList]="messageTypeList" (onSearchData)="searchButtonClick($event)" [rowData]="rowData | async">
</search-form>
</mat-card>
Run Code Online (Sandbox Code Playgroud)
从父级我将 msgTypeList 传递给子级。
在孩子中,我将自动完成绑定到列表,但是当我们点击里面时列表没有显示任何内容。
它只在我们在输入框中输入内容时显示选项(过滤选项)
//childcomponent.html
<form [formGroup]="searchForm" id="searchForm" style="width:100%;height:70%" (ngSubmit)="onSubmit()">
<tr>
<td class="input-form" style="padding-right:4%;width:10%">
<mat-form-field>
<input type="text" placeholder="Message Type" aria-label="Assignee" formControlName="msgType" matInput [matAutocomplete]="autoMsgType">
<mat-autocomplete #autoMsgType="matAutocomplete" placeholder="Message Type" [displayWith]="displayMessageTypeFn">
<mat-option *ngFor="let messageType of filteredMessageTypeList …Run Code Online (Sandbox Code Playgroud)