Local JSON 文件在 Angular 中如何轻松读取

Angular 中如何轻松读取本地 JSON 文件

在 Angular 中读取本地 JSON 文件是一种常见且有用的方法，可以为你的应用程序添加动态数据。JSON（JavaScript Object Notation）是一种流行的数据格式，广泛用于数据交换，并且很容易在 Angular 中处理。本文将详细介绍如何在 Angular 中读取本地 JSON 文件，并提供一些实用的示例。

先决条件

在开始之前，确保你已经安装了 Angular CLI。你可以通过在终端中运行以下命令来检查：

ng --version

如果已安装，你会看到当前的 Angular CLI 版本。如果没有，请按照官方文档中的说明进行安装。

配置 Angular 应用程序

首先，你需要创建一个新的 Angular 应用程序。你可以通过在终端中运行以下命令来做到这一点：

ng new my-app

这将创建一个名为 my-app 的新 Angular 应用程序。

创建组件

接下来，你需要创建一个组件来读取 JSON 文件。在 my-app 目录中，运行以下命令：

ng generate component my-component

这将创建一个名为 my-component 的新组件。

在组件模板中读取 JSON 文件

现在，你需要在组件模板中读取 JSON 文件。打开 my-component.component.html 文件，并添加以下代码：

<ul>
  <li *ngFor="let item of data">
    {{ item.name }}
  </li>
</ul>

这将创建一个列表，并在列表中显示 JSON 文件中的数据。

在组件类中读取 JSON 文件

接下来，你需要在组件类中读取 JSON 文件。打开 my-component.component.ts 文件，并添加以下代码：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {

  data: any;

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get('assets/data.json').subscribe(data => {
      this.data = data;
    });
  }

}

这将从 assets/data.json 文件中读取 JSON 数据，并在 data 属性中存储它。

在组件模板中绑定数据

最后，你需要在组件模板中绑定数据。打开 my-component.component.html 文件，并添加以下代码：

<ul>
  <li *ngFor="let item of data">
    {{ item.name }}
  </li>
</ul>

这将创建一个列表，并在列表中显示 JSON 文件中的数据。

运行应用程序

现在，你可以通过在终端中运行以下命令来运行应用程序：

ng serve

这将在本地启动一个开发服务器。你可以在浏览器中打开 http://localhost:4200 来查看应用程序。

总结

在本文中，我们学习了如何在 Angular 中读取本地 JSON 文件。我们创建了一个 Angular 应用程序，创建了一个组件，并在组件模板中读取了 JSON 文件。我们还学习了如何在组件类中读取 JSON 文件，并在组件模板中绑定数据。希望这篇文章对你有帮助。