使用 ngFor 从数组中创建 Angular 下拉列表

在 Angular 中，ngFor 指令允许我们使用数组的内容来创建模板。这使得我们能够轻松地创建动态的页面元素，如下拉列表。

本文将介绍如何使用 ngFor 从数组中创建下拉列表。

步骤

1. 首先，创建一个数组，以便你可以向下拉列表中添加元素。例如：

export class AppComponent {
  items = ["item1", "item2", "item3"];
}

2. 然后，在HTML模板中使用 ngFor 循环遍历该数组，并为每个数组元素生成一个选项标签。例如：

<select>
  <option *ngFor="let item of items">{{item}}</option>
</select>

在上面的示例中，我们使用了一个 *ngFor 指令来循环遍历 items 数组中的每个元素，并使用插值语法来将元素的值显示在选项标签中。

3. 最后，你就可以将该下拉列表添加到你的应用程序中了。例如：

<div>
  <select>
    <option *ngFor="let item of items">{{item}}</option>
  </select>
</div>

结论

使用 ngFor 指令可以轻松地从数组中创建 Angular 下拉列表。只需遵循上述步骤，即可在你的应用程序中添加具有动态内容的下拉列表。

参考资料

• Angular ngFor directive