JavaScript 中的 ngFor

在 Angular 框架中， *ngFor 指令用于重复渲染一个模板，从而实现循环渲染元素的功能。

使用语法

语法如下所示：

<element *ngFor="let item of iterable">
  <!-- Content to be repeated -->
</element>

• *ngFor：指令名称
• item：当前迭代元素的名称
• iterable：可迭代对象的名称
• element：需要循环渲染的元素

例如，循环渲染一个列表：

<ul>
  <li *ngFor="let item of items">
    {{ item }}
  </li>
</ul>

在这个例子中，items 是一个数组，并且 item 代表数组中的每个元素。循环渲染的元素是 li。

例子

下面展示了一个稍微复杂一些的例子，循环渲染一个卡片列表：

<div class="card-container">
  <div class="card" *ngFor="let card of cards">
    <img src="{{ card.imageUrl }}" alt="{{ card.title }}">
    <div class="card-body">
      <h2>{{ card.title }}</h2>
      <p>{{ card.description }}</p>
      <button (click)="showDetails(card)">View Details</button>
    </div>
  </div>
</div>

在这个例子中，cards 是一个包含卡片信息的数组。Card 对象有一个 imageUrl、title 和 description 属性，分别代表卡片的图片、标题和描述。用户可以单击“View Details”按钮查看详细信息。

这个例子中使用了Angular的事件绑定语法，(click) 指令用于绑定一个单击事件，调用组件中的 showDetails() 方法。

其他用途

除了简单的循环渲染元素之外，ngFor 还可以用于其他一些用途，例如：

• 索引：通过 index 变量可以获取当前元素在可迭代对象中的索引。
• 过滤：可以使用 *ngFor 指令的过滤表达式，来仅仅显示符合特定条件的元素。
• 按照属性排序：也可以使用 *ngFor 应用升/降序排列，但需要使用操作符 pipe。

总结

*ngFor 指令是 Angular 中的一个非常有用的功能，可用于循环渲染元素。它提供了很多灵活的选项，可以用于满足大多数开发者的需求。