#angular #angular-material #angular-material2 #angular-material-6
#угловой #угловой-материал #angular-material2 #angular-material-6
Вопрос:
Я использую mat-autocomplete виджет в своем приложении Angular :
<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 .
Как я могу использовать ссылку для имени во входных данных??
Предложения??
Ответ №1:
Вы можете использовать атрибут displayWith автозаполнения Mat и передать функцию, которая вернет желаемую форматированную строку.
В вашем примере:
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> Комментарии:
1. Это не сработает, из
[value]="shop.value"за чего OP не хочет меняться. Кроме того,displayWithесть функция mat-автозаполнения, а не mat-option.2. Действительно, моя ошибка, сказал это в ответе, но не в коде… В любом случае поиск является правильным решением в этом случае 🙂
3. для меня это полезно, только fix => [value]=»магазин»
4. Я использовал этот метод по какой-то причине, имя не отображается при выборе имени, но в консоли выводится свойство value. Может кто-нибудь, пожалуйста, помочь!!
5. Вы передаете [значение] =»магазин» вместо [значение] =»магазин.значение»?
Ответ №2:
Простой способ с помощью идентификатора параметра может быть полезным:
<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>
и прочитать значение и имя в функции:
onShopSelectionChanged(event) {
const selectedValue = event.option.id;
console.log(selectedValue);
const selectedName = event.option.value;
console.log(selectedName);
}
Комментарии:
1. Очень полезно, когда мы хотим обработать другое значение, а не отображаемое значение.
Ответ №3:
Поскольку вы не хотите изменять [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;
}
Комментарии:
1. Это работает нормально, за исключением случаев, когда имена дублируются, хотя идентификаторы уникальны
Ответ №4:
Вы можете использовать тег FormControl on input и можете изменить значение этого, form-control используя patchValue метод.
Используйте (onSelectionChange)="onEnter($event)" и найдите параметр selectedArray, используя выбранное значение, и из этого выбранного объекта option обновите значение ввода с помощью любого из ключей options.
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 amp;amp;
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);
}
}
}