问题描述
我在我的 Angular 应用程序下使用 mat-autocomplete
小部件:
I'm using the mat-autocomplete
widget under my Angular app :
<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'}
];
如此 - 选项由 name
显示,但在选择 value
不是 name
.
Like this - options are displayed by name
, but when selection the input displaysit by the value
not the name
.
知道我需要其他处理的值,我不会更改mat-automplete
中的[value]
.
Knowing that i need the value for other treatment and i won't change the [value]
in the mat-automplete
.
我如何将名称引用到输入中??
How may i take reference for the name to the input ??
建议??
推荐答案
您可以使用 Mat 自动完成的 displayWith 属性并传入一个函数,该函数将返回所需的格式化字符串.
You can use the displayWith attribute of Mat autocomplete and pass in a function that will return the desired formatted string.
在您的示例中:
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>
这篇关于Angular mat-autocomplete:如何显示选项名称而不是输入中的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!