Angular 2 将 JSON 对象解析为 Angular 类 [重复]

JS

Angular 2 将 JSON 对象解析为 Angular 类

Angular 是一种流行的前端框架，它提供了许多便捷的功能来构建现代化的 Web 应用程序。在 Angular 中，我们经常需要解析 JSON 数据并将其转换为 Angular 类对象。本文将介绍如何使用 Angular 2 将 JSON 对象解析为 Angular 类，并提供一个案例代码来演示。

准备工作

在开始之前，我们需要安装 Angular CLI，并创建一个新的 Angular 项目。如果你还没有安装 Angular CLI，可以使用以下命令进行安装：

npm install -g @angular/cli

安装完成后，我们可以使用以下命令来创建一个新的 Angular 项目：

ng new JSon-parsing-example

接下来，进入项目目录并启动开发服务器：

cd JSon-parsing-example
ng serve

现在，我们已经准备好开始解析 JSON 对象了。

解析 JSON 对象

首先，我们需要创建一个 JSON 文件来存储我们的数据。在项目的根目录下，创建一个名为 data.JSon 的文件，并将以下数据保存到该文件中：

JSon
{
  "name": "John Doe",
  "age": 25,
  "emAIl": "johndoe@example.com"
}

接下来，我们需要创建一个 Angular 类来表示这个 JSON 对象。在 src/app 目录下，创建一个名为 user.ts 的文件，并添加以下代码：

typescript
export class User {
  name: string;
  age: number;
  emAIl: string;
}

现在，我们可以通过使用 Angular 的 HttpClient 模块来获取并解析 JSON 数据。打开 src/app/app.component.ts 文件，并添加以下代码：

typescript
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from './user';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.CSS']
})
export class AppComponent implements OnInit {
  user: User;
  constructor(private http: HttpClient) {}
  ngOnInit() {
    this.http.get<User>('data.JSon').subscribe(data => {
      this.user = data;
    });
  }
}

在上面的代码中，我们首先导入了 HttpClient 和 User 类。然后，在 AppComponent 类中，我们定义了一个名为 user 的属性，用于存储解析后的 JSON 数据。

在 ngOnInit 方法中，我们使用 HttpClient 的 get 方法来获取 data.JSon 文件，并通过 subscribe 方法来订阅获取到的数据。一旦数据获取成功，我们将其赋值给 user 属性。

显示解析后的数据

现在，我们已经成功解析了 JSON 数据并将其存储到了 user 属性中。接下来，我们需要在组件的模板中显示这些数据。

打开 src/app/app.component.html 文件，并添加以下代码：

html
<div *ngIf="user">
  <h2>{{ user.name }}</h2>
  
<strong>年龄:</strong> {{ user.age }}
  
<img src="https://img.izhida.com/topic/c566ca59602c7c5c0d3fe5e18ade447d.jpg" alt="服务器"><br>服务器
<strong>邮箱:</strong> {{ user.emAIl }}
</div>

在上述代码中，我们使用了 Angular 的内置指令 *ngIf 来检查 user 属性是否存在。如果存在，我们就显示用户的姓名、年龄和邮箱。

现在，重新启动开发服务器并访问 http://localhost:4200，你将会看到解析后的 JSON 数据显示在页面上。

通过使用 Angular 2，我们可以轻松地将 JSON 对象解析为 Angular 类，并在应用程序中使用这些数据。本文提供了一个简单的示例来演示如何解析 JSON 数据，并将其显示在应用程序中。希望本文对你理解 Angular 2 的 JSON 解析过程有所帮助！