角度/离子：ng返回空值

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'
        }


              ]

    }

];

然后我有我的家。

    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，它会返回3，看起来是正确的，但由于某种原因它不会从我的数据中返回值。你能帮助我吗？干杯啦！

Answer 1

你正在混淆你的等级，你可以根据你的喜好在不同的方向上做出改变，但总的想法是你的对象和对象数组以你不期望的方式嵌套。你的*ngFor应该是这样的：*ngFor="let singleItem of itemCollection.items"。

这是因为itemCollections被定义为具有单个键值对的对象。关键是items和items被定义为你想要在你的*ngFor中使用的项目数组。