Angular2 http.get 数据不会在 html 模板中呈现

Question

我是 Angular2 的新手，我正在努力让 http.get() Observable 返回的数据显示在我的 html 中。我已将问题缩小到 get() 调用我的 api 之一。如果我使用另一个 api 端点，数据将毫无问题地显示在 html 中。我知道我的 api 正在检索数据，因为当我 console.log() 数据时，预期的输出就在那里。

服务

//color.service.ts
import { Injectable } from '@angular/core'
import { Observable } from 'rxjs/RX'
import { Http, Response, Headers, RequestOptions } from '@angular/http'

@Injectable()
export class ColorService {

   constructor(private http:Http){
   }

   getColors():Observable<IColor[]> {
      return this.http.get('/colors')
      .map((response: Response) => {
         return <IColor[]>response.json();
      })
   }
}

组件

//color.component.ts
import { Component, OnInit } from '@angular/core';
import { ColorService } from './shared/color.service';
import { IColor } from './shared/outage.model';

@Component({
    template: `
        <h4>Colors[]</h4>
        <div *ngFor="let c of colors">{{ c.colorDesc }}</div>
    `
})
export class ColorComponent implements OnInit {
    colors: IColor[];

    constructor(private colorService:ColorService ) {}

    ngOnInit(){
        this.colorService.getColors().subscribe(data => {
            console.log(data);
            this.colors = data;
        })
    }
}

IColor是一个简单的界面：

export interface IColor {
   colorDesc: string;
}

结果 html 输出只是 <h4>Colors[]</h4> 标题；但是，您可以在控制台日志中看到对 http.get('/colors') 的调用成功并且填充了 IColor[] object。对 DOM 的检查表明存在由 *ngFor.

创建的空 <div> 元素

如上所述，到另一个端点的 http.get() 按预期工作：数据显示在 html 中。我很难理解为什么来自另一个 api 的数据不会显示在 DOM 中。检索确实需要 1-2 秒的时间，但我对 Observable 订阅的理解是这些是异步操作；完成后，html 应呈现来自 *ngFor.

的数据

Answer 1

如果 div 正在呈现但未填充任何数据，则说明您从响应中解析出的内容与您绑定到模板的内容不匹配。我会寻找拼写错误，但有趣的是，我在使用界面和 angular CLI 时遇到了很多问题。我一般每次编辑界面都要重新编译

我会尝试在您的 map 函数中删除显式输入，它不是必需的，它已经从函数的 return 类型推断出来，实际上没有任何帮助。没有看到您的数据，我无法进一步评论 returned.

其次，将可观察对象绑定到模板的更好方法是使用异步管道，而不是在 component.ts 中订阅，例如：

colors$ : Observable<IColor[]>;

constructor(private colorService:ColorService ) {}

ngOnInit(){
    this.colors$ = this.colorService.getColors().do(e => console.log(e)); //do just for debugging
}

和模板：

<div *ngFor="let c of colors$ | async">{{ c.colorDesc }}</div>

这样做的原因是它更清晰、更具声明性，最重要的是异步管道为您处理垃圾收集。

Angular2 http.get 数据不会在 html 模板中呈现

Angular2 http.get data will not render in html template

html

angular2-observables

angular

服务

组件