Question

我想在Ionic 3应用程序中从Firebase中读取列表（“新闻”）并且当我运行该应用程序时，它仅显示在页面[object object]中。

有人可以告诉我解决方案吗？

我的代码在下面：

[home.ts]

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireDatabase, AngularFireList  } from 'angularfire2/database';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  newsList: AngularFireList<any[]>

  constructor(public navCtrl: NavController, private database: AngularFireDatabase) {
    this.newsList = this.database.list('news');



  }

}

[home.html]

    <ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item >
      <h2>{{newsList}}</h2>
    </ion-item>
  </ion-list>

</ion-content>

结果仅显示为[object object]

Answer 1

您试图将对象显示为h2。您可以尝试使用ngFor。

   <ion-list>
    <ion-item *ngFor="let item of newList">
      <h2>{{item}}</h2> //or item.subitem, depends of your object or what you want to show.
    </ion-item>
  </ion-list>

Answer 2

请尝试以下代码

 this.newsList = JSON.stringify(this.database.list('news'));

html

 <ion-list>
    <ion-item *ngFor="let item of newList">
      <h2>{{item}}</h2> //or item.subitem, depends of your object or what you want to show.
    </ion-item>
  </ion-list>

当我运行Ionic 3时，问题[object object]显示在html页面中

2 个答案: