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

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

我有同样的问题。

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

我的问题是我的阵列中没有任何东西，所以它显示为空白。

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，以使其正常工作。