使用 ngFor 重复数据

2020-04-25 08:00:00 · 飞浪

介绍 *ngFor是Angular中的预定义指令。它接受一个数组，以在模板上迭代数据，从而使用不同的数据复制模板。它与JavaScript中的forEach()方法相同，后者也会在数组上

介绍

*ngFor是 Angular 中的预定义指令。它接受一个数组，以在模板上迭代数据，从而使用不同的数据复制模板。它与 JavaScript 中的forEach()方法相同，后者也会在数组上迭代。

现实生活中的例子

有很多地方可以使用*ngFor指令。

一个可以清楚地说明需要*ngFor的例子是 HTML5 <select>标签，它有很多具有不同值和标签的<option>标签。

      <select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
    

这里，您在选择标签中有多个选项元素，其中相同的模板随着标签和值的变化而进行迭代。

在 HTML5表格元素中，所有行的列数相同，但列值不同。

      <table>
  <thead>
    <tr>
      <td>First Name</td>
      <td>Last Name</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Betty</td>
      <td>Miller</td>
    </tr>
  </tbody>
</table>
    

在下一节中，您将看到如何使用*ngFor指令实现上述模板。

实现 ngFor

*ngFor接受一个数组来在 HTML 模板上迭代数据。

首先为由字符串值组成的数组创建一个局部变量。

应用程序.组件.ts

      import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  options: string[];

  constructor() {
    this.options = [
      "option1",
      "option2",
      "option3",
      "option4",
      "option5",
      "option6"
    ];
  }
}
    

在app.component.ts和构造函数中定义options变量，并使用虚拟值初始化选项。

应用程序.组件.html

      <select>
  <option [value]="option" *ngFor="let option of options">{{option}}</option>
</select>
    

关于option元素需要注意的一些点。

首先，*ngFor指令用于迭代选项数组的值。它类似于forEach循环，其中考虑单个值，将其放在option元素的value属性中。插值 ( { {}} ) 用于在option元素中打印标签。

其次，将值属性放在方括号（[] ）内，以获取动态值。选项变量的值会根据迭代而变化。

运行应用程序后，您将看到如下所示的输出。

您不必编写六次option元素。 *ngFor指令会为您完成此操作。如果您在浏览器中检查select元素，则会看到以下内容。

您还可以使用*ngFor指令获取元素的索引，类似于JavaScript 中的forEach()循环。您所要做的就是在*ngFor指令中添加一个新变量。

应用程序.组件.html

      <select>
  <option [value]="option" *ngFor="let option of options;let i=index;"
    >{{i+1}}.{{option}}</option
  >
</select>
    

在上面的代码片段中，添加了一个新变量i来获取索引。您也可以用另一种方式编写它，如下所示。

应用程序.组件.html

      <select>
  <option [value]="option" *ngFor="let option of options;index as i"
    >{{i+1}}.{{option}}</option
  >
</select>
    

您可以通过添加trackBy变量来提高*ngFor的性能。

trackBy接受一个返回唯一标识符的函数。它将跟踪总体值并重新呈现已修改且需要更改的部分。

应用程序.组件.html

      <select>
  <option
    [value]="option"
    *ngFor="let option of options;let i=index;trackBy:trackByOption"
    >{{i+1}}.{{option}}</option
  >
</select>
    

现在，在app.component.ts中编写一个函数。

应用程序.组件.ts

      import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  options: string[];

  constructor() {
    this.options = [
      "option1",
      "option2",
      "option3",
      "option4",
      "option5",
      "option6"
    ];
  }

  trackByOption(index, option) {
    return option;
  }
}
    

运行应用程序来检查这些更改。您可以在下面看到输出。

结论

本指南通过一个简单的示例讨论了*ngFor指令，以帮助您理解它。您将在许多场景中注意到index和trackBy的确切用法。除了index和trackBy之外， *ngFor指令中还有多个导出值，例如event、odd、first和last。您可以使用这些导出值使您的 UI 美观且性能卓越。您只需为这些导出值创建别名，它们就可以使用了。

在此阅读并了解更多信息。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 ngFor 重复数据

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

<table> <thead> <tr> <td>First Name</td> <td>Last Name</td> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> <tr> <td>Betty</td> <td>Miller</td> </tr> </tbody> </table>

import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.scss"] }) export class AppComponent { options: string[]; constructor() { this.options = [ "option1", "option2", "option3", "option4", "option5", "option6" ]; } }