我在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>
我的商店数据是这样的:
shopData = [
{name: 'AAA' , value :'11'},
{name: 'BBB', value :'22'},
{name: 'CCC', value : '33'}
];
像这样 - 选项由name
显示,但是在选择时输入显示的是value
而不是name
。
知道我需要其他治疗的价值,我不会改变[value]
中的mat-automplete
。
我怎么可以参考输入的名称?
建议??
您可以使用Mat自动完成的displayWith属性并传入一个将返回所需格式化字符串的函数。
在你的例子中:
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.value">
{{shop.name}}
</mat-option>
</mat-autocomplete>
因为您不想更改[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;
}
在您的模型'shopData'中,在'value'之后添加':'字符或:
export interface Shop {
name: string;
value: number;
}
shopData: Shop[] = [
{name: 'AAA' , value: 11},
{name: 'BBB', value: 22},
{name: 'CCC', value: 33}
];
你可以在FormControl
标签上使用input
,并可以使用form-control
方法更改此patchValue
的值。
使用(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文件:
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);
}
}
}