Angular 读取本地JSON文件

2023-02-08 137 阅读1分钟

Service

news-home.service.ts

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

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

  constructor(private http:HttpClient) {
  }

  getCenterNewsDatas(){
    return  this.http.get('/assets/json/home-center-news.json');
  }

}

Component

news-mian-center.component.ts

//声明接收的数组
listDatas = [];

//初始化
constructor(private service:NewsHomeService) {

}
//获取数据
getData(){
    //把接收的data声明成 any 类型
    this.service.getCenterNewsDatas().subscribe((data:any)=>{
        console.log("NewsMianCenterComponent===", data);
        //如果data不是空 且有length属性（我这样认为）
        if (data != null && data.length){
            this.listDatas = data;
        }
    })
}
//调用获取方法
ngOnInit(): void {
    this.getData();
}