[英]mat-autocomplete Display name but get ID Value
I am using an autocomplete (Mat-autocomplete) and at the moment it allows loading a list of "users".我正在使用自动完成(Mat-autocomplete),目前它允许加载“用户”列表。
In autocomplete, I want to display the username, but I want to save the value of that chosen user ID.在自动完成中,我想显示用户名,但我想保存所选用户 ID 的值。
I had this:我有这个:
this.allFruits = val.map(user => user.username);
I changed this to get all fields, however I am not able to get the values of the user IDs chosen, can anyone help me?我将其更改为获取所有字段,但是我无法获取所选用户 ID 的值,有人可以帮助我吗?
this.allFruits = val;
HTML HTML
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList>
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(fruit)">
{{fruit}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
placeholder="New fruit..."
#fruitInput
[formControl]="fruitCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
{{fruit}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
component成分
constructor(private userService: UserService) {
this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
startWith(null),
map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
}
ngOnInit() {
this.userService.getUsers().subscribe(
(val: any[]) =>{
this.allFruits = val.map(user => user.username);
this.fruitCtrl.setValue(null); //use this to apply changes instantly
}
)
}
remove(fruit: string): void {
const index = this.fruits.indexOf(fruit);
if (index >= 0) {
this.fruits.splice(index, 1);
}
}
selected(event: MatAutocompleteSelectedEvent): void {
this.fruits.push(event.option.viewValue);
this.fruitInput.nativeElement.value = '';
this.fruitCtrl.setValue(null);
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);
}
Perhaps using a Hashmap might be a good idea in the above scenario也许在上述场景中使用 Hashmap 可能是一个好主意
Make a new Map in your class variables as below在你的类变量中创建一个新的 Map 如下
allFruits: string[] = [];
nameIdMap = new Map<string, number>();
Now while initializing allFruits, initialize the map along with it...现在在初始化 allFruits 时,同时初始化地图......
this.allFruits = val.map(user => {
this.nameIdMap.set(user.username, user.id);
return user.username
});
You can obtain this value easily in selected function as stated below, using map.get您可以使用 map.get 在如下所述的选定函数中轻松获取此值
selected(event: MatAutocompleteSelectedEvent): void {
console.log(this.nameIdMap.get(event.option.viewValue));
this.fruits.push(event.option.viewValue);
this.fruitInput.nativeElement.value = '';
this.fruitCtrl.setValue(null);
}
You dont need to write much extra code, neither change any pre-running code.您不需要编写太多额外的代码,也不需要更改任何预运行代码。 So I think this will work just fine.所以我认为这会工作得很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.