[英]Getting Angular Autocomplete Value
So I followed the Angular documentation of it's Angular Material Autocomplete but have been battling two days with getting the value of the selection from the Autocomplete.所以我遵循了它的 Angular Material Autocomplete 的 Angular 文档,但我已经花了两天时间从自动完成中获取选择的价值。 Basically what I want is for the Autocomplete to display the Humans' names and surnames, but the option's value must be the entire Human object.
基本上我想要的是自动完成显示人类的名字和姓氏,但选项的值必须是整个人类对象。 I then just want to console.log the SelectedHuman whenever a Human is selected.
然后我只想在选择 Human 时对 SelectedHuman 进行 console.log。 Any solution to this would probably do.
对此的任何解决方案可能都可以。
Here is a demo project to play with: https://stackblitz.com/edit/angular-hnu6uj这是一个演示项目: https : //stackblitz.com/edit/angular-hnu6uj
Here is the html file:这是html文件:
<input [(ngModel)]="SelectedHuman" (change)="OnHumanSelected()" matInput [formControl]="MyControl" [matAutocomplete]="auto" placeholder="Human">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="AutoCompleteDisplay">
<mat-option *ngFor="let human of arrFilteredHumans | async" [value]="human">
{{human.Name}} - {{human.Surname}}
</mat-option>
</mat-autocomplete>
Here is the ts file: export class AutocompleteDisplayExample implements OnInit {这是 ts 文件:导出类 AutocompleteDisplayExample 实现 OnInit {
SelectedHuman: Human;
MyControl = new FormControl();
arrFilteredHumans: Observable<Human[]>;
arrHumans = [
new Human('1K59DN3', 27, 'John', 'Smith'),
new Human('9VH23JS', 67, 'William', 'Shakespeare'),
new Human('0QNF1HJ', 44, 'Elon', 'Musk')
];
ngOnInit() {
this.arrFilteredHumans = this.MyControl.valueChanges.pipe(
startWith(''),
map((val) => this.filter(val))
);
}
filter(val: any): Human[] {
return this.arrHumans.filter((item: any) => {
//If the user selects an option, the value becomes a Human object,
//therefore we need to reset the val for the filter because an
//object cannot be used in this toLowerCase filter
if (typeof val === 'object') { val = "" };
const TempString = item.Name + ' - ' + item.Surname;
return TempString.toLowerCase().includes(val.toLowerCase());
});
}
AutoCompleteDisplay(item: any): string {
if (item == undefined) { return }
return item.Name + ' - ' + item.Surname;
}
OnHumanSelected() {
console.log(this.MyControl); //This has the correct data
console.log(this.MyControl.value); //Why is this different than the above result?
console.log(this.SelectedHuman); //I want this to log the Selected Human Object
}
}
export class Human {
constructor(
public ID: string,
public Age: number,
public Name: string,
public Surname: string
) { }
}
The click event and the selection event are two different events.点击事件和选择事件是两个不同的事件。 You want the selected event, not the click event, so use
optionSelected
from MatAutocomplete
:你要选择的事件,而不是点击事件,所以在使用
optionSelected
从MatAutocomplete
:
<mat-autocomplete
#auto="matAutocomplete"
[displayWith]="AutoCompleteDisplay"
(optionSelected)="OnHumanSelected($event.option)">
<!--
...
-->
</mat-autocomplete>
OnHumanSelected(option: MatOption) {
console.log(option.value);
}
Here is a Stackblitz link .这是一个Stackblitz 链接。
Here is code这是代码
OnHumanSelected(SelectedHuman) {
console.log(SelectedHuman); // get from view
console.log(this.SelectedHuman); // get from variable
}
HTML File HTML文件
<input [(ngModel)]="SelectedHuman" matInput [formControl]="MyControl" [matAutocomplete]="auto" placeholder="Human">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="AutoCompleteDisplay">
<mat-option (click)="OnHumanSelected(SelectedHuman)" *ngFor="let human of arrFilteredHumans | async" [value]="human">
{{human.Name}} - {{human.Surname}}
</mat-option>
</mat-autocomplete>
So this seems to solve the problem.所以这似乎解决了问题。 Put the OnHumanSelected() function on the (click) event of the mat-option:
将 OnHumanSelected() 函数放在 mat-option 的 (click) 事件上:
<mat-option (click)="OnHumanSelected()" *ngFor="let human of arrFilteredHumans | async" [value]="human">
{{human.Name}} - {{human.Surname}}
</mat-option>
####################
OnHumanSelected() {
console.log(this.SelectedHuman);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.