在 Angular 中进行自定义选择的最佳方法？答案

【问题标题】：Best way to make a custom select in Angular?在 Angular 中进行自定义选择的最佳方法？
【发布时间】：2019-05-30 21:28:15
【问题描述】：

我正在使用 MEAN 堆栈（Angular 6），我仍在寻找构建自定义和可重用 <select> 表单控件的最佳方法，该控件使用从 BE 返回的字符串数组来生成所有 @987654322 @标签。假设我们有 3 个材料 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 循环来生成多个选择，那么我们需要动态生成模板变量。这可能吗？

【问题讨论】：

标签： javascript angular typescript html-select

【解决方案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

【讨论】：

您好，感谢您的回复。我已经尝试过这种方法，但是当您的选择是 *ngFor 循环的一部分时它会失败。我认为在这种情况下没有办法生成动态模板变量，是吗？
事实证明即使在 ngFor 循环中它也可以工作。我已经发布了一个带有示例链接的答案。感谢您让我再次尝试这种方法 :) 我想我上次搞砸了。

【解决方案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"])
}
}

【讨论】：