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

问题描述

我有材料自动完成.

我正在进行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屋！