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[]对象。对DOM的检查表明，<div>创建了空*ngFor个元素。

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

中的数据

Answer 1

如果div正在渲染但没有填充数据，则解析响应的内容与绑定到模板的内容之间存在不匹配。我会搜索拼写错误，但有趣的是，我在使用接口和角度CLI时遇到了很多问题。每次编辑界面时，我通常都需要重新编译。

我试着去除你的map函数中的显式输入，它不是必需的，它已经从函数的返回类型中推断出来，实际上并没有做任何有用的事情。如果没有看到您的数据返回，我无法进一步评论。

其次，将observable绑定到模板的更好方法是使用异步管道而不是在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模板中呈现

服务

组件

1 个答案: