显示Observable <any[ ]> HTML内的返回类型

Question

Angular 2的新手也许有点基础。

我有一个服务功能getMedia其是可观察到的类型的任何[]返回在订阅该信息到组件：

本质上，这是对象数组所以在我的分量I写这个：

export class RecommendationFeedComponent implements OnInit { 

    result:Array<Object>=[]; 

    constructor(private feedService: FeedService, private authService: AuthService, 
       private auth: FirebaseAuth, public af: AngularFire) { } 

    ngOnInit() { 
    this.af.auth.subscribe(
     (user) => { 
      if (user) { 
       this.feedService.getMedia(user.auth.email) 
        .subscribe(result => this.result = result); 
       console.log(this.result); 
      } 
    }) 

    } 

控制台返回空，所以我不知道如何使用它来显示HTML上的数据。

更改的组件和模板：低于这个

<tr class *ngFor="let media of (result)"> 
    <td> 
    <img src={{media.data.images.standard_resolution.url}} height="100" width="100"> 
    </td> 
</tr> 

Answer 1

订阅是asyncroinous，所以你的console.log应该在它里面，否则这将是

import { Component, OnInit } from '@angular/core'; 
import {FeedService} from "../shared/model/feed.service"; 
import {RestaurantMedia} from "../shared/model/restaurantMedia"; 
import {Observable} from "rxjs/Rx"; 
import {ActivatedRoute, Router} from "@angular/router"; 
import {AuthService} from "../shared/security/auth.service"; 
import {FirebaseAuth, AngularFire} from "angularfire2/index"; 


@Component({ 
    selector: 'recommendation-feed', 
    templateUrl: './recommendation-feed.component.html', 
    styleUrls: ['./recommendation-feed.component.css'] 
}) 
export class RecommendationFeedComponent implements OnInit { 
    //Medias = []; 
    //RestaurantMedias$: Observable<any[]>; 
    result:Array<Object>=[]; 


    constructor(private feedService: FeedService, private authService: AuthService, 
       private auth: FirebaseAuth, public af: AngularFire) { } 

    ngOnInit() { 

     this.af 
     .auth 
     .flatMap(user => this.feedService.getMedia(user.auth.email)) 
     .subscribe(result => { 
       this.result = result; 
      // console.log(this.result); 
      }) 



    } 

} 

// HTML模板代码甚至在订阅功能被调用之前调用。

因此，要解决这个问题：

变化：

  this.feedService.getMedia(user.auth.email) 
       .subscribe(result => this.result = result); 
      console.log(this.result); 

要

this.feedService.getMedia(user.auth.email) 
       .subscribe(result => { 
         this.result = result 
        console.log(this.result); 

       }); 

---

顺便说一下，这里有一个更好的方式：

ngOnInit() { 
    this.af 
     .auth 
     .flatMap(user => this.feedService.getMedia(user.auth.email)) 
     .subscribe(result => { 
       this.result = result); 
       console.log(this.result 
     }); 

如果你只想显示没有做任何事的结果在HTML中，你可以使用异步管道：

<div > 
     {{result | async | json }} 
    </div>