相关疑难解决方法(0)

单击时材料自动完成不显示列表

我有一个材料自动完成。

我正在调用 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)

autocomplete list angular-material angular angular6

7
推荐指数
2
解决办法
8197
查看次数

标签 统计

angular ×1

angular-material ×1

angular6 ×1

autocomplete ×1

list ×1