如何循环离子2上的对象数组？

Question

I have an array of objects on my application TS file I'm populating my array with an object that I'm getting from the storage.

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { Dbservice } from '../providers/dbservice';

import { Home } from '../pages/page1/page1';
 import { Setup } from '../pages/frameSetup/setup';

export class Home {
    deviceObj = [];
     constructor(){
         this.deviceObj.push(otherObject);
     }
}

on my html file I want to look on the array and display the data, but when I do this I get an error message

Here is the code on my html file.

  <ion-row>
    <ion-col width-10 *ngFor="let x of deviceObj">
      <button ion-button outline icon-only small>
        <ion-icon name="ios-add"></ion-icon>
      </button>
    </ion-col>
    <ion-col width-10>
      <button ion-button outline icon-only small [navPush]="setupPage">
        <ion-icon name="ios-add"></ion-icon>
      </button>
    </ion-col>
  </ion-row>

I get an error saying that :

polyfills.js:3 Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngforOf' since it isn't a known property of 'ion-col'. 1. If 'ion-col' is an Angular component and it has 'ngforOf' input, then verify that it is part of this module. 2. If 'ion-col' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

Answer 1

You need to add BrowserModule to imports: [...] of AppModule if this is where your code is, or alternatively add CommonModule to imports: [...] if your code is in another module.

The error message means that the NgFor directive is not known in the module. Importing CommonModule or BrowserModule ( AppModule only) makes it available.

Answer 2

As the error says, you just can't use *ngFor in tag. Try using it inside tag and the error will disappear.