Автозаполнение материала не отображает список при клике

Question

У меня есть автозаполнение материала.

Я делаю вызов 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>

От родителя я передаю 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 | async | sort:'msgType'" [value]="messageType">{{messageType.msgType}}</mat-option>
       </mat-autocomplete>
  </mat-form-field>
 </td>
</tr>
</form>

Ниже находится файл child.ts

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

Проблема в том, что если я нажму на ввод автозаполнения, откроется список, но ничего не отобразится

Однако, если мы введем что-либо в поле ввода, отобразятся параметры

Answer 1

У меня была такая же проблема.

Убедитесь, что this.messageTypeList содержит значения во время вызова map ()

Моя проблема заключалась в том, что в моем массиве ничего не было, поэтомуотображается как пустое.

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);
  });
}

Пока у вас есть значения в списке, оно должно отображаться.

Answer 2

Свяжите событие щелчка на вводе в html и вызовите функцию для события щелчка.Примерно так:

     <input type="text" placeholder="Message Type" aria-label="Assignee"  formControlName="msgType" matInput [matAutocomplete]="autoMsgType" (click)="myFunc()" >

и в вашем файле ts объявите логическую переменную и изначально установите для нее значение false.Допустим, переменная bool .Теперь напишите функцию myFunc () и просто переключите эту переменную, например:

this.bool = !this.bool;

Теперь в вашем теге matautocomplete просто установите свойство panelOpen для переменной bool, например:

     <mat-autocomplete #autoMsgType="matAutocomplete" placeholder="Message Type" [displayWith]="displayMessageTypeFn" panelOpen="bool">

Вы можете установить для переменной bool значение false в некоторых последующих функциях, чтобы она работала правильно.