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并将其添加到声明此组件的模块的imports数组中。您似乎也错误地实现了*ngFor指令，在使用索引迭代数组的意义上，它不像普通for循环那样工作，就像每个方法一样，变量保存每个迭代实际的元素。

如果您需要索引，那么您可以执行以下操作：

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

Answer 2

使用* ngFor而不是* ngfor
这将解决您的问题。高兴。

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

2 个答案: