将 json 数据放入数组 angular2答案

【问题标题】：getting json data into an array angular2将 json 数据放入数组 angular2
【发布时间】：2017-03-28 18:42:11
【问题描述】：

我不确定我的代码中缺少什么，但目前我在运行它时没有出现任何错误，但我也没有看到我期望的结果。我有一个 json 文件，我正在将其加载到一个数组中，并希望遍历该数组并将其部分数据显示到页面上。

这是我目前所拥有的：

服务文件

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()

export class AddressDataService{
    addressData: Array<any>;

    constructor(private http:Http){ }
    getAddressData(){
        return this.http.get('./api/addressData.json')
                 .map((res:Response) => res.json());
    }
}

JSON 文件

[{
    "type": "home",
    "id": 1
}, {
    "type": "apartment",
    "id": 2
}, {
    "type": "homeless",
    "id": 3
}]

组件文件

import { Http } from '@angular/http';
import { AddressDataService } from './address.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Component({
  selector: 'my-app',
  templateUrl: '....',
  styleUrls: ['./styles.css'],
  providers: [AddressDataService]
})

constructor(private addressDataService: AddressDataService) {}
  addressData = [];
  getAddressData() {
  this.addressDataService.getAddressData()
                   .subscribe(data => this.addressData = data);
}

HTML 文件

<div *ngFor="let addressDetail of addressData">
    {{addressDetail.type}}
</div>

我这样做对吗？

【问题讨论】：

你什么时候为组件调用getAddressData？
@ExplosionPills 既然你已经引起了我的注意，我实际上并没有看到我在我的组件中调用了getAddressData - 我会在我必须创建的 oninit 函数中这样做吗？
我认为ngOnInit 会是个不错的选择

标签： javascript jquery json angular

【解决方案1】：

你需要打电话给你的getAddressData，例如你的OnInit，我假设你想在导航到页面时获取数据。

所以：

ngOnInit() {
  this.getAddressData();
}

处理完后，您将面临另一个问题。 Http-requests 不允许相对路径，所以

return this.http.get('./api/addressData.json')

会报错，你需要将你的“url”中的点替换为json文件的实际完整路径，从顶级文件夹开始。

【讨论】：

谢谢 - 但我想问一下实际的完整路径：我尝试了以下方法，但我得到的文件是 404：'./src/api/addressData.json'，完整路径是 /Users/userName/Projects/Angular2/quickstart/src/api/addressData
那么你应该像这样使用它：return this.http.get('src/api/addressData.json') 所以你几乎是正确的，只是删除点:)
谢谢！ - 我还使用了http://myjson.com/ 并且很好地存储了我的 json。
太棒了！很高兴听到:)

【解决方案2】：

在你的组件文件中：

.subscribe(
      data => {
        const helperArray = [];
        for (let key in data) {
          helperArray.push(data[key]);
        }
      }
);

【讨论】：

【解决方案3】：

您的组件类中的某些内容需要调用您的 getAddressData 方法。构造函数或更好的选择是实现 OnInit 并从那里调用它。

【讨论】：