Angular 4中如何从JSON文件取数并在HTML中展示

我看你已经成功通过服务获取到了JSON数据并在控制台打印，但没法在HTML里展示，核心问题出在服务里直接订阅了HTTP请求，导致组件无法拿到数据，下面一步步帮你解决：

1. 修复服务代码：返回Observable而非直接订阅 #

你的DataService里的fetchData()方法直接在内部订阅了HTTP请求，这样数据只能在服务内部打印，组件无法获取到返回的数据集。我们需要让服务返回一个Observable，把订阅的逻辑交给组件：

修改data.service.ts：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable'; // 导入Observable类型

@Injectable()
export class DataService {
  constructor(private http: Http) { }

  // 明确返回Observable类型，方便组件订阅
  fetchData(): Observable<any[]> {
    return this.http.get('assets/data/data.json')
      .map((response) => response.json());
  }
}

2. 组件中订阅数据并存储到组件属性 #

在DataComponent里订阅服务返回的Observable，把获取到的数据存到组件的公共属性中，这样模板就能访问到：

修改data.component.ts：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataService } from '../../../services/data.service';
import { Subject } from 'rxjs/Subject'; // 如果用angular-datatables需要导入这个

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit, OnDestroy {
  // 定义公共属性存储数据，供模板使用
  public dataList: any[] = [];

  // 如果你要用angular-datatables，需要添加以下两个属性
  dtOptions: DataTables.Settings = {};
  dtTrigger: Subject<any> = new Subject();

  constructor(private dataResponse: DataService ) { }

  ngOnInit() {
    // 初始化datatable配置（如果用的话）
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2
    };

    // 订阅服务的Observable，获取数据
    this.dataResponse.fetchData()
      .subscribe(
        (data) => {
          console.log(data);
          this.dataList = data; // 把数据赋值给组件属性

          // 如果用angular-datatables，通知组件数据已加载
          this.dtTrigger.next();
        },
        (error) => {
          console.error('加载数据出错:', error); // 处理请求错误
        }
      );
  }

  // 销毁dtTrigger防止内存泄漏（仅用datatable时需要）
  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }
}

3. 在HTML模板中绑定数据 #

现在组件里有了dataList属性，就可以用Angular的模板语法展示数据了：

普通列表展示（无需datatable） #

修改data.component.html：

<h2>数据列表</h2>
<div class="data-item" *ngFor="let item of dataList">
  <p><strong>ID:</strong> {{ item.ID }}</p>
  <p><strong>日期:</strong> {{ item.Date }}</p>
  <p><strong>颜色:</strong> {{ item.Color }}</p>
  <hr>
</div>

使用angular-datatables展示 #

如果你要用到angular-datatables，模板可以这么写：

<h2>DataTable 数据展示</h2>
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>日期</th>
      <th>颜色</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of dataList">
      <td>{{ item.ID }}</td>
      <td>{{ item.Date }}</td>
      <td>{{ item.Color }}</td>
    </tr>
  </tbody>
</table>

额外修复：JSON文件的语法错误 #

注意你的data.json里每个对象的最后一个属性后面多了逗号（比如"Color" : "Orange",），这会导致JSON解析错误，虽然你说服务能运行，但最好修复这个问题：

[
  {
    "Date" : "10/09/2017",
    "ID" : "1",
    "Color" : "Orange"
  },
  {
    "Date" : "10/11/2017",
    "ID" : "2",
    "Color" : "Green"
  }
]

这样修改后，数据应该就能正常在HTML模板里展示了。

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