angular - 多个自动完成 Material Angular 显示相同的下拉菜单

Question

我的多个下拉菜单有效，但显示相同的值。我正在关注 angular material component .

我为每个数组对象创建了不同的过滤器，仍然显示相同的下拉列表。

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { startWith } from 'rxjs/operators/startWith';
import { map } from 'rxjs/operators/map';
import { UsersComponent } from '../users/users.component';

@Component({
  selector: 'app-accommodation',
  templateUrl: './accommodation.component.html',
  styleUrls: ['./accommodation.component.css']
})
export class AccommodationComponent {

      myControl = new FormControl();

      country = [
        new UsersComponent('United States'),
        new UsersComponent('Canada'),
        new UsersComponent('Brazil'),
        new UsersComponent('India'),
        new UsersComponent('China'),
        new UsersComponent('Japan'),
      ];

      nationality = [
        new UsersComponent('American'),
        new UsersComponent('Canadian'),
        new UsersComponent('Indian'),
        new UsersComponent('Chinese'),
        new UsersComponent('African'),
        new UsersComponent('Japanese'),
      ];


      countryFilter: Observable<UsersComponent[]>;
      nationalityfilter: Observable<UsersComponent[]>;

      ngOnInit() {
        this.countryFilter = this.myControl.valueChanges
          .pipe(
            startWith<string | UsersComponent>(''),
            map(value => typeof value === 'string' ? value : value.name),
            map(name => name ? this.filter(name) : this.country.slice()),
          );
        this.nationalityfilter = this.myControl.valueChanges
          .pipe(
            startWith<string | UsersComponent>(''),
            map(value => typeof value === 'string' ? value : value.name),
            map(name => name ? this.filter(name) : this.nationality.slice()),
          );
      }


      filter(name: string): UsersComponent[] {

        return this.country.filter(option => option.name.toLowerCase().indexOf(name.toLowerCase()) === 0),
               this.nationality.filter(option => option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);       
      }

      displayFn(users?: UsersComponent): string | undefined {
        return users ? users.name : undefined;
      }

}

下面是 HTML 代码，我根据 this post 更改了 id .还是不行。

        <div class="col-sm-6">
        <mat-form-field class="example-full-width">
            <input type="text" placeholder="Country" aria-label="Country" matInput [formControl]="myControl" [matAutocomplete]="auto">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                <mat-option *ngFor="let option of countryFilter | async" [value]="option">
                    {{ option.name }}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </div>
    <!-- col end -->
    <div class="col-sm-6">
        <mat-form-field class="example-full-width">
            <input type="text" placeholder="Nationality" aria-label="Nationality" matInput [formControl]="myControl" [matAutocomplete]="auto">
            <mat-autocomplete #autoNationality="matAutocomplete" [displayWith]="displayFn">
                <mat-option *ngFor="let option of nationalityfilter | async" [value]="option">
                    {{ option.name }}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </div>
    <!-- col end -->

@Mjstk 更新后，它工作得很棒，但仍然显示一些错误

Answer 1

您必须更改第二个自动完成的名称，因此它也不会链接到第一个，将“auto”更改为“autoNationality”:[matAutocomplete]="autoNationality">

<mat-form-field class="example-full-width">
            <input type="text" placeholder="Nationality" aria-label="Nationality" matInput [formControl]="myControl" [matAutocomplete]="autoNationality">
            <mat-autocomplete #autoNationality="matAutocomplete" [displayWith]="displayFn">
                <mat-option *ngFor="let option of nationalityfilter | async" [value]="option">
                    {{ option.name }}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>