javascript - 在 Angular 中进行自定义选择的最佳方式？

Question

我正在使用 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 循环，那么我们需要动态生成的模板变量。这可能吗？

Answer 1

一种方法是您可以将选择称为模板变量，比如 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 元素中。

您可以阅读有关模板变量的信息 here