Question

我的API正在获得JSON响应。现在，我试图在我的一个组件中显示它，只是为了理解和观察数据的传输和显示方式，所以我可以稍后构建它。

出于某种原因，即使我的组件正常工作，我仍然无法显示任何内容（我会在其中保留一些其他内容以跟踪它是否显示）。

有什么建议我做错了什么或如何让它运作起来？我的想法已经用完了，我的互联网搜索非常无用。

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

您的组件没有名为contacts的字段，因此您的ngFor将永远无法循环播放。

尝试将其更改为

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

无法显示API响应

1 个答案: