Angular 5中如何从本地JSON文件获取特定数组并在HTML展示

嘿，我看你遇到的问题是JS里用for循环能拿到数组，但Angular模板里的*ngFor就是不显示内容，还没报错对吧？咱们一步步拆解问题，肯定能搞定！

1. 先揪出最明显的路径错误 #

你在JS里访问的是data.static_data.model这个数组，但模板里写的是*ngFor="let model of data"，然后又去取model.static_data.model[i]——这完全是路径搞反了啊！

举个例子，假设你的JSON数据结构是这样的：

{
  "static_data": {
    "model": ["模型A", "模型B", "模型C"]
  }
}

那正确的姿势应该是先把目标数组赋值给组件的一个属性，比如：

// 你的组件.ts文件
import { Component, OnInit } from '@angular/core';
// 直接引入本地JSON（如果是放在assets里的话，也可以用HttpClient请求）
import rawData from './your-local-data.json';

@Component({
  selector: 'app-model-list',
  templateUrl: './model-list.component.html'
})
export class ModelListComponent implements OnInit {
  // 定义一个数组属性，用来存要展示的模型列表
  modelList: any[] = [];

  ngOnInit(): void {
    // 先确认数据加载没问题，控制台能打印出数组就对了
    console.log(rawData.static_data.model);
    // 把目标数组赋值给组件属性
    this.modelList = rawData.static_data.model;
  }
}

然后模板里直接遍历这个modelList就行，不用再绕弯子：

<ul>
  <li *ngFor="let item of modelList; let i = index">
    第{{i+1}}个模型：{{item}}
  </li>
</ul>

2. 排查几个容易踩的坑 #

（1）数据是不是异步加载的？ #

如果你的JSON是通过HttpClient从服务器或者本地assets文件夹请求的，那得确保处理异步逻辑：

// 用HttpClient的情况，记得在模块里导入HttpClientModule哦
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

ngOnInit(): void {
  this.http.get('./assets/your-data.json').subscribe((res: any) => {
    // 订阅里拿到数据后再赋值
    this.modelList = res.static_data.model;
  });
}

或者更优雅一点用async管道（需要把属性改成Observable）：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

modelList$: Observable<any[]>;

ngOnInit(): void {
  this.modelList$ = this.http.get('./assets/your-data.json').pipe(
    map(res => res.static_data.model)
  );
}

模板里这样写：

<ul>
  <li *ngFor="let item of modelList$ | async; let i = index">
    第{{i+1}}个模型：{{item}}
  </li>
</ul>

（2）组件里的属性是不是公共的？ #

如果你直接在模板里用data，那这个data必须是组件类的公共属性，不能是ngOnInit里的局部变量！比如：

// 错误写法：局部变量模板根本拿不到
ngOnInit() {
  let data = require('./your-data.json');
}

// 正确写法：把data定义成组件的公共属性
data: any;
ngOnInit() {
  this.data = require('./your-data.json');
  this.modelList = this.data.static_data.model;
}

（3）再仔细看看控制台！ #

有时候Angular的错误可能藏在"Warnings"标签里，或者你可以装个Angular DevTools扩展，直接看组件的属性有没有正确绑定数据，这样能快速定位问题。

3. 快速验证的小技巧 #

要是还是不确定问题在哪，可以先在模板里直接打印数据看看：

<!-- 先确认整个data对象有没有加载进来 -->
<p>完整数据：{{data | json}}</p>
<!-- 确认目标数组是否存在 -->
<p>模型数组：{{data.static_data.model | json}}</p>

如果这些都能正常显示，那就是*ngFor的写法错了；如果显示不出来，那就是数据压根没加载到组件里。

内容的提问来源于stack exchange，提问作者inhaq