使用Angular 7显示下载链接中的JSON文件的内容

ng new project-name

ng generate service json-service

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

@Injectable({
  providedIn: 'root'
})
export class JsonService {
  constructor(private http: HttpClient) { }

  getJsonData(url: string) {
    return this.http.get(url);
  }
}

ng generate component json-component

import { Component, OnInit } from '@angular/core';
import { JsonService } from '../json-service.service';

@Component({
  selector: 'app-json-component',
  templateUrl: './json-component.component.html',
  styleUrls: ['./json-component.component.css']
})
export class JsonComponentComponent implements OnInit {
  jsonData: any;

  constructor(private jsonService: JsonService) { }

  ngOnInit() {
    const jsonUrl = 'http://example.com/json-file.json'; // 替换为实际的JSON文件链接
    this.jsonService.getJsonData(jsonUrl).subscribe(data => {
      this.jsonData = data;
    });
  }
}

<div *ngIf="jsonData">
  <pre>{{ jsonData | json }}</pre>
</div>

<app-json-component></app-json-component>