如何在ionic3頁面中打印對象數據

Question

我試圖從ionic3的FIREBASE中獲取數據，並將其全部打印在頁面中。 我得到了數據，將其記錄在控制台中，一切都很好，我看到了結果。 但這是一個對象。 我想通過{{object.data}}從該對象獲取特定數據，其中'object'=對象的名稱，而'data'=我要從該對象獲取的內容。 但是它不提供任何輸出，而是提供錯誤。

抱歉，我是這里的新手，請在提供的圖像中查看我的代碼。 謝謝。

這是我的home.ts文件

import { Component } from '@angular/core';

import { NavController, IonicPage, NavParams } from 'ionic-angular';

import { ShoppingListService } from '../../services/shopping-list.service'; 

import { Item } from '../../models/items/item.interface';

import {Observable} from 'rxjs/Observable'; 

import { AngularFireDatabase } from 'angularfire2/database';

@IonicPage()

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

    shoppingList$: Observable<Item[]>;
  items: any; 


  constructor(private shopping: ShoppingListService,private afDb: AngularFireDatabase,
        private navCtrl: NavController, private navParams: NavParams) {

    //A problem here with functions or with home.html PIPE 
    //I cannot display values of shoppingList$ 

    /*this.shoppingList$ = this.shopping.getShoppingList()
    .snapshotChanges()
    .map(changes=>{ 
    return changes.map(c=>({
        key: c.payload.key, ...c.payload.val()
    }))
    }) */


     //let key = this.navParams.get('key');

     this.afDb.object(`shopping-list`).valueChanges().subscribe(data=>{
       console.log(data);
       this.items = data;

     })


   }

}

這是我的home.html

<ion-content padding>

    <ion-list>
        <h2>Items</h2>   

        <ion-item *ngFor="let item of items">
            {{item.name}}
        </ion-item>

    </ion-list>

</ion-content>

Answer 1

正如錯誤所言，您僅從響應中獲取一個對象，因此您不能對對象使用ngFor，只需將模板更改為

 <ion-item>
    {{items?.name}}
 </ion-item>