Question

我正在开发一个Angular2应用程序，我想用JSON文件中的http GET请求显示一些JSON数据。这是我的JSON（文件数据/ contatti.json）：

[
    "08823323459", 
    "3325849593",
    "somemail@hotmail.com"
]

我有一个请求来自此文件的数据的ContactService：

import { Injectable } from '@angular/core';

import { Headers, Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

@Injectable()
export class ContattiService {

private contactUrl = 'data/contatti.json';
constructor(private http: Http) { }

private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
}

getContatti(): Promise<string[]> {
    return this.http.get(this.contactUrl)
        .toPromise()
        .then(res => res.json().data as string[])
        .catch(this.handleError);
}
}

有一个组件使用该服务检索数据：

import { Component, OnInit } from '@angular/core'
import { ContattiService } from './contatti.service'

@Component({
    selector: 'contact-app',
    templateUrl: './contatti.html'
})

export class ContactComponent {

contatti: string[];
constructor(
    private contactService: ContattiService) { }

ngOnInit(): void {
    this.getContatti();
}

getContatti(): void {
    this.contactService.getContatti().then(contatti => this.contatti = contatti);
}
}

但是当我尝试在我的html页面（contatti.html）中显示它们时：

<div class="col-sm-6">
        <div class="panel panel-default">
            <ul>
                <li *ngFor="let contatto of contatti">
                    {{contatto}}
                </li>
            </ul>
        </div>        
    </div>

页面不打印数据。有人能帮帮我吗？

Answer 1

在组件内部尝试此操作

getContatti(): void {
    this.contactService.getContatti().subscribe(contatti=>{
      this.contatti = contatti;
    });
}

和service.ts应该是，

getContatti(): {
    return this.http.get(this.contactUrl)
        .map(res => res.json().data)
        .catch(error => this.handleError(error));
  }

Answer 2

你应该用subscribe：

重写你的方法

getContatti(): void {
    this.contactService.getContatti()
     .subscribe(contatti => this.contatti = contatti);
}

并服务于：

getContatti(): {
    return this.http.get(this.contactUrl)
        .map(res => res.json().data)
        .catch(error => this.handleError(error));
  }

还有一个，如果你试图访问res.json（）。数据你的contatti.json应该是这样的：

{
  "data": [
    "08823323459", 
    "3325849593",
    "somemail@hotmail.com"
  ]
}

ngFor不打印JSON数据

2 个答案: