javascript - 将json数据放入数组angular2

Question

我不确定我的代码中缺少什么，但目前我在运行它时没有遇到任何错误，但我也没有看到我期望的结果。我有一个 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>

我这样做的方式正确吗？

Answer 1

例如，您需要在 OnInit 中调用 getAddressData，我假设您希望在导航到页面时获取数据。

所以:

ngOnInit() {
  this.getAddressData();
}

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

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

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