在Angular中制作自定义选择器的最佳方法是什么？

Question

我使用的是 MEAN 技术栈（Angular 6），一直在寻找最佳方法来构建一个定制的可重复使用的 <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 循环的封闭循环，会生成多个选择框，那么我们需要有动态生成的模板变量。这真的可能吗？

- Andi Aleksandrov

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 元素内。

您可以在此处阅读有关模板变量的更多信息这里

- kiranghule27

---

你好，感谢回复。我已经尝试了那种方法，但是当你的选择是*ngFor循环的一部分时，它会失败。在这种情况下，我不认为有一种生成动态模板变量的方法，对吗？ - Andi Aleksandrov

原來在 ngFor 循環中也可以運作。我已經張貼了一個帶有範例連結的答案。感謝讓我再次嘗試這種方法 :) 我想我上一次搞砸了。 - Andi Aleksandrov

Answer 2

尝试这个动态选项的示例

在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>

在TS中

@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.log( this["mySelect"])
}
}

- Satheesh

---

这在Angular 9中可行吗？我无法获得“getValue()”或“getKey()”方法返回正确的值。 - Cwinds