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

问题描述：

我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

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