[英]Getting Angular Autocomplete Value
所以我遵循了它的 Angular Material Autocomplete 的 Angular 文檔,但我已經花了兩天時間從自動完成中獲取選擇的價值。 基本上我想要的是自動完成顯示人類的名字和姓氏,但選項的值必須是整個人類對象。 然后我只想在選擇 Human 時對 SelectedHuman 進行 console.log。 對此的任何解決方案可能都可以。
這是一個演示項目: https : //stackblitz.com/edit/angular-hnu6uj
這是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>
這是 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
) { }
}
點擊事件和選擇事件是兩個不同的事件。 你要選擇的事件,而不是點擊事件,所以在使用optionSelected
從MatAutocomplete
:
<mat-autocomplete
#auto="matAutocomplete"
[displayWith]="AutoCompleteDisplay"
(optionSelected)="OnHumanSelected($event.option)">
<!--
...
-->
</mat-autocomplete>
OnHumanSelected(option: MatOption) {
console.log(option.value);
}
這是一個Stackblitz 鏈接。
這是代碼
OnHumanSelected(SelectedHuman) {
console.log(SelectedHuman); // get from view
console.log(this.SelectedHuman); // get from variable
}
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>
所以這似乎解決了問題。 將 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.