Лучший способ сделать собственный выбор в Angular?
Я использую стек MEAN (Angular 6), и я все еще ищу лучший способ создать настраиваемый и многократно используемый элемент управления формой <select>, который использует массив строк, возвращаемых из BE, для генерации всех тегов <option>. Скажем, например, у нас есть 3 материала wood, metal и plastic, и возвращаемый массив может быть одним из следующих (хранится в переменной materials):
(in my example.component.ts)
form = new FormGroup({
'material' = new FormControl('')
});
get material() {return this.form.get('material');}
materials = [
{
key: "mat_wood",
value: "Wood"
},
{
key: "mat_metal",
value: "Metal"
},
{
key: "mat_plastic",
value: "Plastic"
}
]
или
(in my example.component.ts)
form = new FormGroup({
'material' = new FormControl('')
});
get material() {return this.form.get('material');}
materials = [
{"mat_wood": "Wood"},
{"mat_metal": "Metal"},
{"mat_plastic": "Plastic"}
]
и у нас есть такая HTML-структура:
(in my example.component.html)
<form [formGroup] = "form">
<div class = "select-wrap">
<span class = "select-value">{{}}</span>
<select formControlName = "material">
<option *ngFor = "let mat of materials" value = "{{}}">{{}}</option>
</select>
</div>
</form>
Что в конечном итоге должно быть скомпилировано для этого:
<select formControlName = "material">
<option value = "mat_wood">Wood</option>
<option value = "mat_metal">Metal</option>
<option value = "mat_plastic">Plastic</option>
</select>
Здесь у нас есть классический пример настраиваемой структуры выбора. <span class = "select-value"> отображает текст выбранной опции пользователю. <select> имеет opacity, установленный на 0, и расположен поверх <span>, поэтому, когда пользователь щелкает мышью, он нажимает на нее и активирует ее.
Для каждой опции мне нужно поместить mat_[something] в атрибут value и читаемый Something в виде текста в опции, как в примере выше: <option value = "mat_wood">Wood</option>.
Вопрос: как я могу поместить выбранный текст параметра в <span>? Я ищу многоразовый способ сделать это.
РЕДАКТИРОВАТЬ:
Глядя на первый ответ, видно (и я забыл упомянуть), что использование переменной шаблона делает свою работу. Но если у нас есть включающий цикл * ngFor, который генерирует несколько выборок, тогда нам нужно иметь динамически сгенерированные переменные шаблона. Это вообще возможно?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Один из способов - вы можете указать select как переменную шаблона, скажем, mySelect.
<select #mySelect formControlName = "material">
<option value = "mat_wood">Wood</option>
<option value = "mat_metal">Metal</option>
<option value = "mat_plastic">Plastic</option>
</select>
И обратитесь к его свойству options.text вот так.
{{ mySelect && mySelect.selectedIndex > -1 ? mySelect.options[mySelect.selectedIndex].text : ''}} внутри вашего элемента span.
Вы можете прочитать о переменных шаблона здесь
Оказывается, он работает даже в цикле ngFor. Я отправил ответ со ссылкой на пример. Спасибо, что заставили меня снова попробовать этот подход :) Думаю, в прошлый раз я напортачил.
Попробуйте этот пример для динамической опции
В HTML
<mat-form-field>
<mat-select placeholder = "Select" [(value)] = "selected">
<mat-option *ngFor = "let data of materials" [value] = "getKey(data)">{{getValue(data)}}</mat-option>
</mat-select>
</mat-form-field>
<p>You selected: {{selected}}</p>
В ТС
@Component({
selector: 'select-value-binding-example',
templateUrl: 'select-value-binding-example.html',
styleUrls: ['select-value-binding-example.css'],
})
export class SelectValueBindingExample {
selected = 'option2';
materials = [
{"mat_wood": "Wood"},
{"mat_metal": "Metal"},
{"mat_plastic": "Plastic"}
]
getValue(obj)
{
return obj[Object.keys(obj)[0]]
}
getKey(obj)
{
return Object.keys(obj)[0]
}
checkValue()
{
console.info( this["mySelect"])
}
}
Привет, спасибо за ответ. Я пробовал этот метод, но он не работает, когда ваш выбор является частью цикла * ngFor. Я не думаю, что в этом случае есть способ сгенерировать динамические переменные шаблона, не так ли?