APIレスポンスを表示できません

Question

APIがJSON応答を取得しています。今では、データの転送と表示方法を理解して観察するために、コンポーネントの1つで可能な限り表示するようにしています。そのため、後でそれを構築することができます。

何らかの理由で、私のコンポーネントが動作しているにもかかわらず、何かを表示することができません（表示するかどうかを調べるために他のものを保持しています）。

私は間違って何をやっているのですか、それを動作させる方法を教えてください。私はアイデアがなくなり、私のインターネット検索は非常に実りありませんでした。

contact.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/Http'; 
import { Observable } from 'rxjs/Observable'; 
import { map } from "rxjs/operator/map"; 
import { environment } from '../environments/environment'; 
import { IContact } from './icontact'; 
import './rxjs-operators'; 

const API_URL = environment.apiUrl; 

@Injectable() 
export class ContactService { 

    constructor(private http: Http) { } 

    public getContacts(): Observable<IContact[]> { 
     return this.http.get(API_URL) 
      .map(response => <IContact[]>response.json()); 
    } 
} 

contact.component.ts

import { Component, OnInit } from '@angular/core'; 
import { ContactService } from '../contact.service'; 
import { Http, Response } from '@angular/Http'; 
import { IContact } from '../icontact'; 

@Component({ 
    selector: 'app-contact', 
    templateUrl: './contact.component.html', 
    styleUrls: ['./contact.component.css'], 
    providers: [ContactService] 
}) 

export class ContactComponent implements OnInit { 

    private contactlist: IContact[]; 

    constructor(private contactService: ContactService) { 
    } 

    public ngOnInit() { 
     this.contactService.getContacts().subscribe(
      (contacts) => { this.contactlist = contacts; }, 
      (error) => { console.log(error); } 
     ); 
    } 
} 

contact.component.html - 私は右のそれを取得する場合、テンプレートの下からのものを表示することができるはずです私のAPIが空に戻ってきます。

<div *ngFor="let contact of contacts"> 
{{contact}} 
</div> 

Answer 1

あなたngForがループ以上に何かを持っていることはありませんので、あなたのコンポーネントは、contactsと呼ばれるフィールドを持っていません。

閉じる

<div *ngFor="let contact of contactList"> 
{{contact}} 
</div>