如何绑定到 Angular Material Autocomplete 下拉列表中的 Id，但按字符串表示进行过滤

Question

我有一个带有过滤器的 Angular Material Autocomplete 下拉列表，该过滤器按CustomerName.

这是通过我的getAllCustomers()方法返回的客户实现的。于是我做了loop通过每个Customer到push了CustomerName到一个新的array，基本上变成我的filteredOptions。

我的问题是：如何通过搜索 CustomerName 来实现此过滤器，但绑定到每个 Customer 的 Id？

在object我最终想要保存的内容中，我想保存.Customer.Id而不是CustomerName.

我曾尝试创建一个 new object array，同时包含CustomerName和Id，但这不适用于filteredOptionsandfilter方法。似乎该filter方法只需要一个array带有单个值的而不是objects.

另外，我需要在我的HTML.

这是我的基本fileredOptions实现：（注意：我包括object {name: element.CustomerName, id: element.Id}了我希望使用的。这不像解释的那样工作。工作方法只是推element.CustomerName入array：

filteredOptions: Observable<string[]>;

constructor(private loadDataService: LoadDataService, private assetDataService: AssetDataService, private router: Router, private toastr: ToastrService) { }

ngOnInit() {
    this.getAllCustomers();
}

filter(val: string): string[] {
    return this.customerNameArray.filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0);
}

getAllCustomers() {
  this.loadDataService.getAllCustomers()
  .subscribe(data => {
    this.customerArray = data;
    let thisArray = [];
    this.customerArray.forEach(element => {
      thisArray.push({name: element.CustomerName, id: element.Id});
    });
    this.customerNameArray = thisArray;
    this.filteredOptions = this.myCustomerSearchControl.valueChanges.pipe(
      startWith(''),
      map(val => this.filter(val))
    );
  });
} 

这是我的HTML：

<mat-form-field>
    <input type="text" placeholder="Customer Search" aria-label="Number" matInput [formControl]="myCustomerSearchControl" [matAutocomplete]="auto">
        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{ option }}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

Answer 1

如果您使用对象作为选项，则需要修改过滤器函数和filteredOptions以使用该对象而不是字符串数组。您还需要使用 mat-autocomplete 的 displayWith 功能来允许输入与对象一起使用。这里有一个 stackblitz 的例子。

你的代码：

export class Customer{
    constructor(public CustomerName: string, public Id: number) { }
}

...

filteredOptions: Observable<Customer[]>;

constructor(private loadDataService: LoadDataService, private assetDataService: AssetDataService, private router: Router, private toastr: ToastrService) { }

ngOnInit() {
    this.getAllCustomers();
}

filter(val: any) {
    let name = val.CustomerName || val; // val can be Customer or string
    return this.customerNameArray.filter(option => option.CustomerName.toLowerCase().indexOf(name.toLowerCase()) === 0);
}

getAllCustomers() {
    this.loadDataService.getAllCustomers()
    .subscribe(data => {
        this.customerArray = data;
        let thisArray = [];
        this.customerArray.forEach(element => {
            thisArray.push(new Customer(element.CustomerName, element.Id));
        });
        this.customerNameArray = thisArray;
        this.filteredOptions = this.myCustomerSearchControl.valueChanges.pipe(
            startWith(null),
            map(val => this.filter(val))
        );
    });
}

displayCustomer(cust: Customer) {
    return cust ? cust.CustomerName : '';
}

HTML：

<mat-form-field>
    <input type="text" placeholder="Customer Search" aria-label="Number" matInput [formControl]="myCustomerSearchControl" [matAutocomplete]="auto">
        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayCustomer">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{ option.CustomerName }}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>