我使用的是 MEAN 技术栈(Angular 6),一直在寻找最佳方法来构建一个定制的可重复使用的
这里有一个经典的自定义选择框结构示例。
对于每个选项,我需要将
问题是:如何将所选选项文本放在
编辑:
查看第一个答案显示(我忘记提到)使用模板变量就可以完成任务了。但是,如果我们有一个包含 *ngFor 循环的封闭循环,会生成多个选择框,那么我们需要有动态生成的模板变量。这真的可能吗?
<select>
表单控件,该控件使用 BE 返回的字符串数组生成所有的 <option>
标签。假设我们有三种材料: 木头
、金属
和 塑料
,返回的数组可以是以下之一(存储在变量 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 循环的封闭循环,会生成多个选择框,那么我们需要有动态生成的模板变量。这真的可能吗?