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

Question

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

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

我的问题是:如何通过对 CustomerName 的搜索来实现此过滤器，但绑定(bind)到每个客户的 Id？

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

我已经尝试创建一个新的 object array ，同时包含 CustomerName和 Id ，但这不适用于 filteredOptions和 filter方法。好像是 filter方法只需要 array具有单个值而不是 objects .

另外，我需要在我的 HTML 中正确绑定(bind)它。 .

这是我的基本 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

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

你的代码:

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>