[英]Mat-autocomplete - Display name but save User ID value
I am trying to implement autocomplete, however I want to save the selected user ID in the database.我正在尝试实现自动完成,但是我想将选定的用户 ID 保存在数据库中。
That is, in autocomplete I want to appear user name to select, but as a return value I do not want the name, but its ID.也就是说,在自动完成中,我想显示要选择的用户名,但作为返回值,我不需要名称,而是它的 ID。
I think my problem is in this line:我认为我的问题出在这一行:
this.userService.getUsers().subscribe(
(val: any[]) =>{
this.allFruits = val.map(user => user.username);
this.fruitCtrl.setValue(null);
}
)
My Code --Stackblitz我的代码——Stackblitz
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);
}
)
}
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);
}
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>
You definitely want to have stream of objects, not strings in this.filteredFruits
.您肯定希望拥有对象流,而不是this.filteredFruits
字符串。 With current code base, you would have to find and id of selected string, which sounds fragile - better don't separate key/value pairs from each other or might face bugs when wrong id is used.使用当前的代码库,您必须找到所选字符串的 id 和 id,这听起来很脆弱 - 最好不要将键/值对彼此分开,否则在使用错误的 id 时可能会遇到错误。
this.allFruits = val;
Then change this._filter
function to filter object[]
not string[]
:然后将this._filter
函数更改为过滤object[]
而不是string[]
:
private _filter(value: string): any[] {
const filterValue = value.toLowerCase();
return this.allFruits.filter(fruit => fruit.name.toLowerCase().indexOf(filterValue) === 0);
}
And for Mat Option:对于垫子选项:
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit.id">
{{fruit.name}}
</mat-option>
Now fruitCtrl
should have an id as a value现在fruitCtrl
应该有一个 id 作为值
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.