將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')

會導致錯誤，您需要從頂層文件夾開始，用json文件的實際完整路徑替換“ URL”中的點。

Answer 2

在您的組件文件中：

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

Answer 3

組件類中的某些內容需要調用getAddressData方法。 構造函數，或者更好的選擇是實現OnInit並從那里調用它。