Angular：使用带有很多选项的选择答案

【问题标题】：Angular: use a select with a lot of optionsAngular：使用带有很多选项的选择
【发布时间】：2019-11-05 11:51:16
【问题描述】：

我通常将 Select 与 3 或 4 个选项一起使用，如下所示：

<select name="car_color" [(ngModel)]="car.color">
    <option value='BL'>Blue</option>
    <option value='RD'>Red</option>
</select>

问题是我有一个 120 种颜色的列表。我可以把它们都用同样的方式，但我想用正确的方式来做

【问题讨论】：

标签： angular select options

【解决方案1】：

您可以使用组件类来存储有关选项的信息

class Component {
  public items = [{name: 'Blue', value: 'BL'}, {name: 'Red', value: 'Red'}];

}


<select name="car_color" [(ngModel)]="car.color">
   <option *ngFor="let item of items" [value]="item.value">
     {{ item.name }}
   </option>
</select>

【讨论】：

【解决方案2】：

向您的组件中添加带有值和文本的汽车颜色数组，然后您可以在 html 中执行循环以显示所有选项，如下所示：

组件：

carColors = [{text:'Blue', value: 'BL'},{text:'Red', value: 'RD'}];

HTML：

 <select name="car_color" [(ngModel)]="car.color">
    <option *ngFor="let carColor of carColors" value=car.value>{{carColor.text}}</option>
  </select>

【讨论】：

【解决方案3】：

您可以简单地遍历您的列表：

example.html

<select name="car_color" [(ngModel)]="car.color">
  <option *ngFor="let color of colorList"[value]="color.value">{{color.name}}</option>
</select>

example.ts

colorList = [
  { value: 'BL', name: 'blue' },
  { value: 'RD', name: 'red' }
  …
];

【讨论】：

这与下面给出的答案有何不同？
@jitender 逻辑差不多，我们只是同时回答，不知道对方的反应
有 3 分钟的差异，请尝试为其他答案投票，而不是再次发布相同的答案，因为这只会在这里造成混乱