单击时材料自动完成不显示列表 [英] Material autocomplete not displaying list on click

问题描述

我有一个材料自动完成功能.

I have a material autocomplete.

我正在调用 ngrx 来提取数据.

I am making an ngrx call to pull the data.

 //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>

从父级我将 msgTypeList 传递给子级.

From the parent I am passing the msgTypeList to the child.

在子组件中，我将自动完成功能绑定到列表，但是当我们单击内部时列表没有显示任何内容.

In the child, I am binding the autocomplete to the list but the list is not displaying anything when we click inside.

它只在我们在输入框中输入内容时显示选项(过滤选项)

It only displays options when we type something in the input box ( which filters the options )

 //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 | async | sort:'msgType'" [value]="messageType">{{messageType.msgType}}</mat-option>
       </mat-autocomplete>
  </mat-form-field>
 </td>
</tr>
</form>

下面是child.ts文件

Below is the child.ts file

   //childcomponent.ts
searchForm: FormGroup;

  ngOnInit() {
this.searchForm = this.formBuilder.group({
      direction: [null],
      msgType: [null, Validators.nullValidator],
     });
    this.filterMessageTypeLists();
     }



filterMessageTypeLists() {
    this.filteredMessageTypeList = this.searchForm.controls['msgType'].valueChanges.pipe(
      startWith<string | any>(''),
      map(value => typeof value === 'string' ? value : value.msgType),
      map(msgType => msgType ? this._msg_filter(msgType, this.messageTypeList) : this.messageTypeList.slice())
    );
  }


     private _msg_filter(msgType: string, lists: any[]): any[] {
    const filterValue = msgType.toLowerCase();
    return lists.filter(option => option.msgType.toLowerCase().includes(msgType.toLowerCase()))
      }

  displayMessageTypeFn(field?: any): string | undefined {
return field ? field.msgType : undefined;;
 }

问题是如果我点击自动完成输入，它应该打开列表但没有显示

Issue is if I click in the autocomplete input, it should open the list but nothing displays

但是，如果我们在输入框中输入任何内容，则会显示选项

However if we enter anything in the input box, the options are then displayed

推荐答案

我遇到了同样的问题.

确保在 map() 调用期间 this.messageTypeList 中有值

Make sure this.messageTypeList has values in it during the map() call

我的问题是我的数组中没有任何内容，因此显示为空白.

My issue was that didn't have anything in my array so it showed as blank.

ngOnInit() {
// I subscribed to messageTypeList; 
// Then I did my control.onValueChanged( map... map...);
}

应该是

ngOnInit() {
  ObservableList.subscribe(array => {
     messageTypeList = array;
     control.onValueChanged( // do your mapping filter stuff);
  });
}

只要您的列表中有值，它就会显示出来.

As long as you have values in your list it should show up.

这篇关于单击时材料自动完成不显示列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！