Angular/Ionic: ngFor 返回空值

Question

所以我正在练习一些 Angular/Ionic 并且很难弄清楚为什么我的 *ngFor 不显示我的数据。这对我来说似乎很简单，但我想我做错了什么。

所以我有一个 item.interface.ts 看起来像这样：

export interface Item {
    id: string;
    name: string;
}

items.ts 看起来像这样：

export default [
  {
        items:[

        {
            id:'1',
            name:'Milk'
        },

        {
            id:'2',
            name:'Wheat'
        },

        {
            id:'3',
            name:'Cheese'
        }


              ]

    }

];

然后我有我的 home.ts:

    import { Component, OnInit } from '@angular/core';
    import { NavController, NavParams } from 'ionic-angular';

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



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

    export class HomePage implements OnInit {

        itemCollection: {items: Item[]}[];

      constructor(public navCtrl: NavController,
                  private navParams: NavParams){}

      ngOnInit(){
        this.itemCollection = items;
      }

  }

最后是我的 home.html:

<ion-header>
  <ion-navbar>
    <ion-buttons start>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>Add Items</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-row>
        <ion-col text-center>
            <form>
                <label for="item">Type an item/ingredient name</label>
                <input type="text" name="item"><br>
                <button ion-button small type="submit">Add Item</button>
                <button ion-button small color="danger">Empty List</button>
            </form>
        </ion-col>
    </ion-row>  
    <ion-row>
        <ion-col>
            <ion-list>
                <button ion-item *ngFor="let singleItem of itemCollection">
                    <p>{{singleItem.name}}</p>
                </button>
            </ion-list>
        </ion-col>  
    </ion-row>
    <ion-row>
        <ion-col text-center>
            <button ion-button medium block>Scan</button>
        </ion-col>  
    </ion-row>    
</ion-content>

所以当我在 home.html 中执行 ngFor 时，它什么也不打印，而不是 singleItem.name

出于好奇，如果我尝试打印 singleItem.items.length，它会显示 return 3，这看起来是正确的，但由于某些原因它不会 return 来自我的数据。请问有人能帮我吗？伙计们干杯！

Answer 1

您正在混淆关卡，您可以根据自己的喜好在不同的方向上进行更改，但总体思路是您的对象和对象数组以您意想不到的方式嵌套。您的 *ngFor 应如下所示：*ngFor="let singleItem of itemCollection.items".

这是因为 itemCollections 被定义为具有单个键值对的对象。关键是 items 并且 items 被定义为您要在 *ngFor.

中使用的项目数组

Angular/Ionic: ngFor 返回空值

Angular/Ionic: ngFor returning empty value

ionic-framework

ngfor

angular