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 关于模板引用以及如何在 mat 中使用它们自动完成 https://material.angular.io/components/autocomplete/overview

另外，我没有循环和更改原始数组，而是重新设计了过滤器函数以始终根据输入的 ngModel 返回一个新数组，您可以在 stackblitz 中尝试它完全可以工作。

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