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

您只需在ngAfterViewInit生命周期挂钩中为searchForm设置值

ngAfterViewInit（）：void { this.searchForm .setValue（''）; }

Answer 3

在html输入中绑定一个click事件，并在click事件上调用一个函数。像这样：

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

Answer 4

您只需要在获取数据后立即调用form.valueChanges，而不是像这样在init函数中执行它：

this.data1.getArticleS().subscribe(a => {
        this.tabArticle = a;
        console.log(a);
        this.filteredArticles = this.stockForm.get('article').valueChanges //erreur angular qui fonctionne bug interpreter ?
            .pipe(
                startWith(''),
                map(value => typeof value === 'string' ? value : value.name),
                map(name => name ? this._filter(name) : this.tabArticle.slice()));

    });

Answer 5

我正在使用

<mat-option *ngFor="let option of filteredRecipients | async" ...

使用

ngOnInit(): void {
    this.filteredRecipients = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this.chatService.filterForAutoComplete(value))
      );
 }

问题是我的视图（因此this.filteredRecipients）在this.chatService实际收到map函数试图获取的收件人列表之前被渲染。因此，我改为使用以下代码来确保在运行map函数之前已填充了收件人。

为我服务：

private vAllRecipientsPopulatedSubject = new Subject<any>();
public allRecipientsPopulated$ = this.vAllRecipientsPopulatedSubject.asObservable();
public setRecipients(rcpts: RecipientModel[]) {
    const callback = () => {
      this.vAllRecipientsPopulatedSubject.next();
    };
    this.vAllRecipients = [];
    let itemsProcessed = 0;
    rcpts.forEach(element => {
      this.vAllRecipients.push(element);
      itemsProcessed++;
      if (itemsProcessed === rcpts.length) {
        callback();
      }
    });
}

在我的控制器中

this.filteredRecipients = combineLatest([this.myControl.valueChanges.pipe(startWith('')), this.chatService.allRecipientsPopulated$])
  .pipe(
    map(([changes, notused]) => this.chatService.filterForAutoComplete(changes))
  );

重大自动完成操作不会在点击时显示列表

5 个答案: