ngForはJSONデータを出力しません

Question

私はAngular2アプリケーションを開発しており、JSONファイルからhttp GETリクエストを使っていくつかのJSONデータを表示したいと考えています。 は、ここに私のJSON（ファイルデータ/ contatti.json）です：サービスを使用してデータを取得するコンポーネントがあり

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); 
} 
} 

：

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

私は、このファイルからデータを要求ContactServiceがあります。

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> 

ページにデータが印刷されません。誰かが私を助けることができますか？

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

とサービスに：

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)); 
    } 

そしてもう一つ、あなたがres.jsonにアクセスしようとした場合（）あなたのcontatti.jsonはのようになります。データ：

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

Answer 2

はあなたが購読をごメソッドを書き換える必要があります

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