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

您需要在getAddressData中呼叫OnInit，我假设您想要在导航到页面时获取数据。

所以：

ngOnInit() {
  this.getAddressData();
}

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

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

会导致错误，您需要更换＆＃34; url＆＃34;中的点。使用json文件的实际完整路径，从顶级文件夹开始。

Answer 2

在您的组件文件中：

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

Answer 3

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

将json数据转换为数组angular2

3 个答案: