嵌套 ngfor 无法绑定到“ngforOf”错误答案

【问题标题】：Can't bind to 'ngforOf' error for nested ngfor嵌套 ngfor 无法绑定到“ngforOf”错误
【发布时间】：2017-10-15 22:01:58
【问题描述】：

我收到以下错误

错误：模板解析错误：无法绑定到“ngforOf”，因为它不是“ion-item”的已知属性。 1. 如果 'ion-item' 是一个 Angular 组件并且它有 'ngforOf' 输入，那么验证它是这个模块的一部分。 2. 如果“ion-item”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 3. 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。（...

以下模板代码

  <ion-card *ngFor="let i of routineLen">
      <ion-card-header>
        {{routines[i].routineName}}
      </ion-card-header>
      <ion-card-content>
        <ion-item class ="row" *ngfor="let j of setLen[0]">
            <ion-item class="col">
                <ion-label fixed>Set Name: {{routines[i].sets[j].setExercise}}</ion-label>
            </ion-item>
        </ion-item>
      </ion-card-content>
  </ion-card>

我很确定这个错误与我嵌套 ngfor 有关，因为循环单独工作，但找不到任何可能出错的地方。感谢任何帮助。

这是我的 app.module.ts 文件，如果有帮助的话

import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpModule } from '@angular/http';

import { MyApp } from './app.component';
import { IonicStorageModule } from '@ionic/storage';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { SignupPage } from '../pages/signup/signup';
import { RoutinePage } from '../pages/routine/routine';
import { AuthProvider } from '../providers/auth/auth';
import { RoutinesProvider } from '../providers/routines/routines';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
    SignupPage,
    RoutinePage
  ],
  imports: [
    BrowserModule,
    CommonModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    SignupPage,
    RoutinePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthProvider,
    RoutinesProvider
  ]
})
export class AppModule {}

这是我对 home.ts 的导入

import { Component } from '@angular/core';
import { NavController, ModalController, LoadingController } from 'ionic-angular';
import { RoutinesProvider } from '../../providers/routines/routines';
import { AuthProvider } from '../../providers/auth/auth';
import { LoginPage } from '../login/login';
import { RoutinePage} from '../routine/routine';
import { RoutineModel } from '../../app/models/routine-model';
import { SubRoutine } from '../../app/models/routine-model';

【问题讨论】：

标签： angular ionic-framework ngfor

【解决方案1】：

您需要导入CommonModule 并将其添加到声明此组件的模块的导入数组中。您似乎也错误地实现了 *ngFor 指令，它不像普通的 for 循环那样工作，因为您使用索引迭代数组，它就像一个 for each 方法，其中每次迭代变量都保存实际元素。

如果你需要索引，那么你可以这样做：

*ngFor="let item of items; let i = index"

【讨论】：

我正在使用 Ionic，带有嵌套 ngFor 的模板位于我的主页中，其中 app.module 作为其模块，并导入了浏览器和公共模块。
@krissan，确认您已导入模板中使用的组件的所有模块。我还注意到您在第二个 *ngFor 中有错字，但我认为这不是错误。

【解决方案2】：

使用 *ngFor 代替 *ngfor
这将解决您的问题。快乐。

【讨论】：

我认为事情没有那么简单。这只是一个错字。