如何在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;

     })


   }

}

这是我的家.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>