mat-autocomplete 在 mat-table 中不起作用

Question

问题描述：

我定义了多个 mat-autocomplete 如下所示，使用几乎相同的代码从多个列表中获取数据。

<div class="col-md-4">
<mat-form-field class="example-full-width">
  <mat-label>Level</mat-label>
  <input matInput name="level" aria-label="Level" [matAutocomplete]="auto" 
  [(ngModel)]="element.Level" (ngModelChange)="filtredSelection($event,'Levels')">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displaySelectedLevel" >
    <mat-option *ngFor="let level of filtredLevels | async" [value] = "element.Level">
      <div (click)="levelsOptionClicked($event, element, level)">
        <span>{{level.Code}}</span> |
        <small>{{level.Description}}</small>
      </div>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
</div>
<div class="col-md-8">
<mat-form-field class="example-full-width">
  <mat-label>Location</mat-label>
  <input matInput name="location" aria-label="Location" [matAutocomplete]="auto" 
  [(ngModel)]="element.Location" (ngModelChange)="filtredSelection($event,'Locations')">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displaySelectedLocation" >
    <mat-option *ngFor="let location of filtredLocations | async" [value] = "element.Location">
      <div (click)="locationsOptionClicked($event, element, location)">
        <span>{{location.Code}}</span> |
        <small>{{location.Description}}</small>
      </div>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
</div>

第一个有效，并显示选择列表，但是在第二个上我可以看到它发出调用并获得结果，但下拉选择没有正确显示。

我注意到的奇怪问题是，当我在第一个有效的控件上单击并过滤项目然后移动到第二个控件时，它会在第二个控件的下拉列表中显示第一个控件的选项。

这是我的控制逻辑

  applyLevelSelectionFilter(filter: string) {
    if (filter?.length >= 3) {
     const promise = this.dataService.getAllLevels(filter).then<Level[]>(
        data => {
          this.isLoadingFilters = false;
          let result = [];
          if (data) {
            const levels = (data as any).value;
            this.logger.log('fetched filtred levels', levels);
            result = (data as any).value;
          }
          return result;

        });
        this.filtredLevels = from(promise);
    } else {
      this.logger.log('search string less than 3 char, clearing the level selection', filter);
      return of([]);
    }
  }

  applyLocationSelectionFilter(filter: string) {
    if (filter?.length >= 3) {
      this.isLoadingFilters = true;
      const promise = this.dataService.getAllLocations(filter).then<Location[]>(
        data => {
          let result = [];
          if (data) {
            const locations = (data as any).value;
            this.logger.log('fetched filtred locations', locations);
            result = (data as any).value;
          }
          return result;

        });
        this.filtredLocations = from(promise);
    } else {
      this.logger.log('search string less than 3 char, clearing the location selection', filter);
      return of([]);
    }
  }

  filtredSelection(filter, entitySet){
    this.logger.log('Triggring filtered list update', filter, entitySet);
    if (entitySet === 'Levels' ) {
      this.applyLevelSelectionFilter(filter);
    } else if (entitySet === 'Locations') {
      this.applyLocationSelectionFilter(filter);
    } else {
      this.logger.error('Triggring filtered list update with unknown entity set', filter, entitySet);
    }
  }

我找不到这里有什么问题。

更新 1

我重新创建了它 here。单击该行以展开并查看编辑字段。

Answer 1

尝试为每个自动完成定义不同的模板引用，例如将 #auto="matAutocomplete" 更改为 #location="matAutocomplete" 并在输入中调整 [matAutocomplete]="location"。在此处了解更多信息 https://angular.io/guide/template-reference-variables about template references and here how to use them in the mat auto complete https://material.angular.io/components/autocomplete/overview

此外，我没有循环和更改原始数组，而是将过滤器函数重新设计为始终return一个新数组，具体取决于输入的 ngModel，您可以在 stackblitz 中尝试它，它完全有效。

您可以找到更正 here on stackblitz forked from your stackblitz

mat-autocomplete 在 mat-table 中不起作用

mat-autocomplete not working inside mat-table

angular-material

angular-material2

angular

更新 1