[英]Angular mat-autocomplete : How to display the option name and not the value in the input
I'm using the mat-autocomplete
widget under my Angular app :我在我的 Angular 应用程序下使用mat-autocomplete
小部件:
<mat-form-field class="col-md-3" color="warn">
<input type="text"
id="libelleShop"
#inputSelectShop
placeholder="Selectionner la boutique"
matInput
formControlName="libelleShop"
ngDefaultControl
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete""
(optionSelected)="onShopSelectionChanged($event)">
<mat-option *ngFor="let shop of shopData" [value]="shop.value">
{{shop.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
my Shop data is like this :我的商店数据是这样的:
shopData = [
{name: 'AAA' , value :'11'},
{name: 'BBB', value :'22'},
{name: 'CCC', value : '33'}
];
Like this - options are displayed by name
, but when selection the input displaysit by the value
not the name
.如此 - 选项按name
显示,但在选择输入时显示value
而不是name
。
Knowing that i need the value for other treatment and i won't change the [value]
in the mat-automplete
.知道我需要其他治疗的价值,我不会改变mat-automplete
的[value]
。
How may i take reference for the name to the input ??我如何将名称引用到输入中?
Suggestions ??建议??
You can use the displayWith attribute of Mat autocomplete and pass in a function that will return the desired formatted string.您可以使用 Mat 自动完成的 displayWith 属性并传入一个函数,该函数将返回所需的格式化字符串。
In your example:在你的例子中:
displayFn(shop: Shop): string { return shop.name; }
<mat-autocomplete #auto="matAutocomplete"" (optionSelected)="onShopSelectionChanged($event)" [displayWith]="displayFn"> <mat-option *ngFor="let shop of shopData" [value]="shop"> {{shop.name}} </mat-option> </mat-autocomplete>
Simple way by using option id mayby useful:使用选项id 的简单方法可能有用:
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onShopSelectionChanged($event)">
<mat-option *ngFor="let shop of shopData" [value]="shop.name" [id]="shop.value">
{{shop.name}}
</mat-option>
</mat-autocomplete>
and read value & name in the function:并在函数中读取值和名称:
onShopSelectionChanged(event) {
const selectedValue = event.option.id;
console.log(selectedValue);
const selectedName = event.option.value;
console.log(selectedName);
}
Because you don't want to change [value]="shop.value"
, your only resort is to lookup the name based on value in a function used with the displayWith
feature:因为您不想更改[value]="shop.value"
,您唯一的方法是在与displayWith
功能一起使用的函数中根据值查找名称:
<mat-autocomplete ... [displayWith]="getShopName" ... >
getShopName(value) {
const results = this.shopData.filter(shop => shop.value === value);
if (results.length) {
return results[0].name;
}
return value;
}
You can use FormControl
on input
tag and can change the value of this form-control
using patchValue
method.您可以在input
标签上使用FormControl
,并且可以使用patchValue
方法更改此form-control
的值。
Use (onSelectionChange)="onEnter($event)"
and find the selectedArray option using the selected value, and from that selected option object update the value of input with any of the options key.使用(onSelectionChange)="onEnter($event)"
并使用选定的值找到 selectedArray 选项,然后从该选定的选项对象中使用任何选项键更新输入的值。
Html :网址:
<form class="example-form">
<mat-form-field class="example-full-width">
<input #stateInput (keyup)="0" matInput placeholder="State"
aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option (onSelectionChange)="stateInput.value !=undefined &&
onEnter($event)" *ngFor="let state of filteredStates | async"
[value]="state.name">
<img style="vertical-align:middle;" aria-hidden
src="{{state.flag}}" height="25" />
<span>{{ state.name }}</span> |
<small>Population: {{state.population}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
Ts file : Ts 文件:
onEnter(evt: any){
const selectedState = this.states.find(state =>
state.name.toLowerCase()==evt.source.value.toLowerCase());
if (evt.source.selected) {
console.log(selectedState);
if(selectedState) {
setTimeout(()=>{
this.stateCtrl.patchValue(selectedState.population);
}, 0);
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.