无法绑定到嵌套 ngfor 的 'ngforOf' 错误

Question

我收到以下错误

错误：模板解析错误：无法绑定到 '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';

Answer 1

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

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

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

Answer 2

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

无法绑定到嵌套 ngfor 的 'ngforOf' 错误

Can't bind to 'ngforOf' error for nested ngfor

ionic-framework

ngfor

angular