为什么此管道适用于本地模拟数据，而不适用于来自Firebase的传入数据？

Question

有人给我提供了这个柱塞来完成我需要做的事情。https://plnkr.co/edit/q9olLVsEcGrskv8oQkV7?p=preview

我使用它，并在我自己的模拟数据上使用它，看起来像这样。

links = [ {
      link  : 'I need to expand my current brand.',
      val   : 'expand'
  }, {
      link  : 'I need to re-create my Brand.',
      val   : 'recreate'
  }, {
      link  : 'I need to build a Brand for my new Business.',
      val   : 'new-business'
  }, {
      link  : 'I need to build a Brand for my new product.',
      val   : 'new-product'
  }, {
      link  : 'I have a technical difficulty that requires an Artist.',
      val   : 'tech-difficulty'
  } ]

像魅力一样工作。然而，当我连接一个包含Firebase数据的变量时，它看起来像这样。

"home_intro_links" : {
    "link01" : {
        "link"  : "I need to expand my current brand.",
        "val"   : "expand"
    },
    "link02" : {
        "link"  : "I need to re-create my brand.",
        "val"   : "recreate"
    },
    "link03" : {
        "link"  : "I need to build a brand for my new Business.",
        "val"   : "new-business"
    },
    "link04" : {
        "link"  : "I need to build a brand for my new product.",
        "val"   : "new-product"
    },
    "link05" : {
        "link"  : "I have a technical difficulty that requires an Artist.",
        "val"   : "tech-difficulty"
    }
}

不管我尝试做什么，它都不会起作用。

我是这样调用数据的。

//服务文件

import { Injectable }           from '@angular/core';
import { AngularFire,
    FirebaseListObservable,
    FirebaseObjectObservable }  from 'angularfire2';
import { Observable }           from 'rxjs/Rx';
import 'rxjs/add/operator/map';

@Injectable
export class HomeService {
    HomeIntroLinks: FirebaseListObservable<any>;

    constructor(private af: AngularFire) {}

    getHomeIntroLinks(){
        this.HomeIntroLinks = this.af.database.list('/home_intro_links') as FirebaseListObservable<any>
            return this.HomeIntroLinks;
    }
}

//组件

import { Component, OnInit,
    Pipe, PipeTransform }       from '@angular/core';
import { AngularFire,
    FirebaseListObservable,
    FirebaseObjectObservable }  from 'angularfire2';
import { HomeService }          from '../home.service';

@Pipe({name: 'homeIntroPipe'})

export class HomeIntroPipe implements PipeTransform {
    transform(arr: any, linkSize: number) {
        return arr.reduce((prev, cur, index) => (index % linkSize) ?
            prev : prev.concat([arr.slice(index, index + linkSize)]), []);
  }
}

@Component({
    moduleId:     module.id,
    selector:     'home-intro',
    templateUrl:  './home-intro.component.html',
    styleUrls:    ['./home-intro.component.css'],
    providers:    [ HomeService ]
})

export class HomeIntroComponent implements OnInit{
    homeIntroLinks: FirebaseListObservable<any>;

    constructor(private _homeService: HomeService) {}

    ngOnInit() {
        this._homeService.getHomeIntroLinks().subscribe(HomeIntroLinks =>{
            this.homeIntroLinks = HomeIntroLinks;
                //console.log(this.homeIntroLinks);
            });
    }
}

//模板中的html

<div *ngFor="let links of homeIntroLinks" class="row home_link_container justify-content-center">
   <div *ngFor="let link of links" class="col-4">
      <div class="card">
         <p class="home_link" [routerLink]="'/home/'+link.val" routerLinkActivate="active">
            {{link.link}}
         </p>
      </div>
    </div>
</div>

只是我和我做事的方式吗？。。。。或者调用局部变量会有很大的不同吗？到目前为止，我已经尝试了json管道，我尝试了添加json。parse（）。如果你想知道我遇到了什么特别的错误，请告诉我，这样我可以重新尝试，看看它会带来什么。在这一点上，我不记得所有的我的头顶笑。

AJT_82的更新

这是我控制台的截图

我厌倦了你的下一个解决方案。浏览器说它不能识别firebaseObj，所以我在类中将它定义为firebaseObj 。。。不知道还能用它做什么。然后我发现了另一个错误，因为它无法识别它，所以我不得不添加。这是它的，所以现在在我的@OnInit

this.firebaseObj = this._homeService.getHomeIntroLinks()
        this.homeIntroLinks = Object.keys(this.firebaseObj).map(x => this.firebaseObj[x])

现在我回到[对象对象]问题。这是控制台的屏幕截图。

Answer 1

您可以使用异步管道与可观察。

<div *ngFor="let links of homeIntroLinks | async" class="row home_link_container justify-content-center">
  ...
</div>

查看结果的简化视图：

  <div *ngFor="let links of HomeIntroLinks | async" class="row home_link_container justify-content-center">
    {{links.link}}
  </div>

Answer 2

在服务中试试这个：

 getHomeIntroLinks(){
    this.HomeIntroLinks = this.af.database.list('/home_intro_links') 
        return this.HomeIntroLinks;
 }

在组件中：

homeIntroLinks; // remove the typing to firebaseobservable (for now)

ngOnInit() {
    this.homeIntroLinks = this._homeService.getHomeIntroLinks()
}

在这里，您可能需要在模板中添加异步管道：

*ngFor="let links of homeIntroLinks | async" 

否则，如果恰好是从firebase返回的对象，请映射键并创建数组：

ngOnInit() {
    firebaseObj = this._homeService.getHomeIntroLinks()
    this.homeIntroLinks = Object.keys(firebaseObj).map(x => firebaseObj[x])  
}

然后，对于由于在数据到达之前加载视图而未引发错误的应用程序，明智的做法是将div中的所有内容包装为：

Answer 3

您的firebase应该以这种格式发送数据

 [{
  "link01": {
    "link": "I need to expand my current brand.",
    "val": "expand"
  },
  "link02": {
    "link": "I need to re-create my brand.",
    "val": "recreate"
  },
  "link03": {
    "link": "I need to build a brand for my new Business.",
    "val": "new-business"
  },
  "link04": {
    "link": "I need to build a brand for my new product.",
    "val": "new-product"
  },
  "link05": {
    "link": "I have a technical difficulty that requires an Artist.",
    "val": "tech-difficulty"
  }
}]

您可以使用map操作符将返回的数据转换为服务中的json格式

 getTasks(): Observable<any[]> {
        return this._http.get(this._url)
            .map((response: Response) => <any[]>response.json())
            .do(data => console.log("data we got is " + JSON.stringify(data)))
            .catch(this.handleError);

现场演示