[英]How bind to an Id in an Angular Material Autocomplete drop-down, but filter by the string representation
I have an Angular Material Autocomplete drop-down with a filter that filters by CustomerName
. 我有一个Angular Material Autocomplete下拉菜单,其中包含一个按CustomerName
进行过滤的过滤器。
This was implemented via my returned Customers from my getAllCustomers()
method. 这是通过我的getAllCustomers()
方法返回的客户实现的。 I then do a loop
through each Customer
to push
the CustomerName
into a new array
, which essentially becomes my filteredOptions
. 然后我做了loop
通过每个Customer
来push
的CustomerName
到一个新的array
,基本上成了我filteredOptions
。
My question is: How can I implement this filter with the search on the CustomerName, but have a binding to the Id of each Customer? 我的问题是:如何通过对CustomerName的搜索来实现此过滤器,但是要绑定到每个Customer的ID?
In the object
that I eventually want to save, I want to save the Customer.Id
and not the CustomerName
. 在我最终要保存的object
中,我想保存Customer.Id
而不是CustomerName
。
I have tried creating a new object array
, containing both the CustomerName
and Id
, but this does not work with the filteredOptions
and filter
method. 我尝试创建一个包含CustomerName
和Id
的新object array
,但这不适用于filteredOptions
和filter
方法。 It seems like the filter
method only takes an array
with single values and not objects
. 似乎filter
方法仅采用具有单个值而不是objects
的array
。
Also, I would need to bind this correctly in my HTML
. 另外,我需要在HTML
正确绑定它。
Here is my basic fileredOptions
implementation: (Note: I included my object
{name: element.CustomerName, id: element.Id}
that I wish to use. This doesn't work as explained. The working method simply pushes element.CustomerName
into the array
: 这是我的基本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))
);
});
}
Here is my HTML
: 这是我的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>
If you use an object for your options, you will need to modify your filter function and filteredOptions to use the object and not a string array. 如果使用对象作为选项,则需要修改过滤器函数和filteredOptions以使用该对象而不是字符串数组。 You will also need to use the displayWith feature of mat-autocomplete to allow the input to work with the object. 您还需要使用mat-autocomplete的displayWith功能来允许输入与对象一起使用。 A stackblitz example is here . 这里有一个堆叠闪电的例子。
Your code: 您的代码:
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: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.