我正在使用MEAN堆栈( Angular 6),并且仍在寻找构建自定义和可重用<select>表单控件的最佳方法,该控件使用从BE返回的字符串数组来生成所有<option>标记。假设有3种 Material woodmetalplastic,返回的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的信息

09-26 13:10