我正在使用MEAN堆栈( Angular 6),并且仍在寻找构建自定义和可重用<select>
表单控件的最佳方法,该控件使用从BE返回的字符串数组来生成所有<option>
标记。假设有3种 Material wood
,metal
和plastic
,返回的Array可以是以下之一(存储在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循环生成多个选择,那么我们需要动态生成模板变量。那有可能吗?
最佳答案
一种方法是您可以将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
属性。您的span元素内的
{{ mySelect && mySelect.selectedIndex > -1 ? mySelect.options[mySelect.selectedIndex].text : ''}}
。您可以阅读有关模板变量here的信息