Angular 8 如何在视图中迭代 JSON 对象

在 Angular 8 应用程序中，我们经常需要迭代 JSON 对象并将其显示在视图中。本文将介绍如何在 Angular 8 中使用 *ngFor 指令迭代 JSON 对象。

准备工作

首先，我们需要准备一个 JSON 对象。在本示例中，我们将准备一个包含学生信息的 JSON 对象。我们将使用以下 JSON 格式：

[
  {
    "id": 1,
    "name": "张三",
    "age": 20,
    "address": "北京市朝阳区"
  },
  {
    "id": 2,
    "name": "李四",
    "age": 21,
    "address": "北京市海淀区"
  },
  {
    "id": 3,
    "name": "王五",
    "age": 22,
    "address": "北京市丰台区"
  },
  {
    "id": 4,
    "name": "赵六",
    "age": 23,
    "address": "北京市昌平区"
  }
]

我们将保存此对象到一个名为 students.json 的文件中。在 Angular 应用程序中，我们可以通过 HTTP 模块获取此文件：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Student } from './student';

@Injectable({
  providedIn: 'root'
})
export class StudentService {

  constructor(private http: HttpClient) { }

  getStudents() {
    return this.http.get<Student[]>('/assets/students.json');
  }
}

使用 *ngFor 指令迭代 JSON 对象

现在，让我们来看看如何在 Angular 视图中使用 *ngFor 指令迭代 JSON 对象。假设我们的组件中包含一个名为 students 的学生数组，我们可以通过以下方式在模板中迭代它：

<div *ngFor="let student of students">
  <p>{{ student.id }} - {{ student.name }} - {{ student.age }} - {{ student.address }}</p>
</div>

在上面的代码中，我们使用 *ngFor 指令来迭代学生数组。该指令使用 let student of students 表达式将数组中的每个学生赋值给变量 student。我们可以在 div 标签中使用 student 对象的属性来显示学生的详细信息。

此外，我们还可以在模板中使用 ng-template 和 ng-container 指令来更好地组织代码。例如：

<ng-container *ngFor="let student of students">
  <ng-template [ngIf]="student.age > 20">
    <div>
      <p>{{ student.id }} - {{ student.name }} - {{ student.age }} - {{ student.address }}</p>
    </div>
  </ng-template>
</ng-container>

在上面的代码中，我们使用 ng-container 来代替 div 标签，同时使用 ng-template 和 ngIf 指令来仅显示学生年龄大于 20 岁的学生信息。

总结

通过本文，我们学习了如何在 Angular 8 中使用 *ngFor 指令迭代 JSON 对象。希望本文可以帮助你更好地了解 Angular 8 开发。