导入文件 json angular 12 - Javascript

在 Angular 12 应用程序中，我们经常需要从一个 JSON 文件中读取数据。这可以通过导入 JSON 文件并将其存储在变量中来实现。在本文中，我将向您展示如何导入文件 json angular 12 - Javascript，并在应用程序中使用它。

步骤

以下是将 JSON 文件导入到 Angular 12 应用程序中的步骤：

步骤 1：创建 JSON 文件

首先，我们需要创建一个名为 data.json 的 JSON 文件。您可以在该文件中包含应用程序中需要读取的数据。

[
  {
    "id": 1,
    "name": "John"
  },
  {
    "id": 2,
    "name": "Marry"
  },
  {
    "id": 3,
    "name": "Robert"
  }
]

步骤 2：导入 JSON 文件

我们要在应用程序中使用 JSON 数据，需要将 data.json 文件导入到 app.module.ts 文件中。使用 Angular 的 HttpClientModule 将 data.json 文件从服务器获取到当前应用的根目录下。

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤 3：创建服务并获取数据

现在我们已经将 JSON 文件导入到应用程序中，让我们创建服务来获取数据。在 Angular 中，我们可以使用 HttpClient 来获取 JSON 数据。在文件 app.service.ts 中，我们可以定义一个 getData() 方法来获取数据。

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

@Injectable({
  providedIn: 'root'
})
export class AppService {
  private url = 'assets/data.json';

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get(this.url);
  }
}

我们使用 HttpClient 发出 GET 请求并告诉它从 assets/data.json 中获取数据。导出服务后，我们可以在组件中注入它，并调用 getData() 方法。

步骤 4：在组件中使用数据

现在我们已经从 data.json 中获取了数据，让我们将它们显示在组件中。在 app.component.ts 文件中，我们可以注入 AppService，然后在 ngOnInit() 方法中调用 getData() 方法。

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  data: any;

  constructor(private appService: AppService) {}

  ngOnInit() {
    this.appService.getData().subscribe(data => {
      this.data = data;
    });
  }
}

在 HTML 文件中，我们可以使用 *ngFor 指令循环遍历数据并显示它们。

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

这是全部内容，现在你已经知道如何导入文件 json angular 12 - Javascript 并在组件中使用 JSON 数据。使用这些步骤，您可以将任何 JSON 文件导入到您的 Angular 12 应用程序中。