延迟加载导致 'ngModel' 找不到问题

Question

我看到了多个标题相同的问题，但在大多数情况下，作者有一些错别字。我显然希望不要犯同样的错误。我检查并重新检查了打字错误的代码，但没有找到任何错误。如果审核后是这种情况，那么我提前道歉。

我相信我的情况有所不同。我认为错误是由于延迟加载（猜测）而发生的。我在这里生成代码。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'location',
    loadChildren: 'app/location/location.module#LocationModule'
  },
  {
    path: 'restaurants',
    loadChildren: 'app/restaurant/restaurant.module#RestaurantModule'
  },
  {
    path: 'menu',
    loadChildren: 'app/menu/menu.module#MenuModule'
  },
  {
    path: '',
    loadChildren: 'app/home/home.module#HomeModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

menu-list.component 是 menu.model 的一部分。

menu.model.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { MenuRoutingModule } from './menu-routing.module';
import { MenuListComponent } from './menu-list/menu-list.component';

@NgModule({
  imports: [
    CommonModule,
    MenuRoutingModule,
    NgbModule
  ],
  declarations: [MenuListComponent]
})
export class MenuModule { }

menu-routing.module.ts

import { MenuListComponent } from './menu-list/menu-list.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {path:'', component:MenuListComponent}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MenuRoutingModule { }

在 menu-list.component.html 中出现以下行的错误：

<input [(ngModel)]="xyz" class="form-control input-number" value="0" min="0" max="100">

我收到以下错误：

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
                        </button>
                    </span>
                    <input [ERROR ->][(ngModel)]="xyz" class="form-control input-number" value="0" min="0" max="100">
                    "): ng:///MenuModule/MenuListComponent.html@17:27 Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
                        </button>
                    </span>
                    <input [ERROR ->][(ngModel)]="xyz" class="form-control input-number" value="0" min="0" max="100">
                    "): ng:///MenuModule/MenuListComponent.html@17:27
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24668)
    at JitCompiler._parseTemplate (compiler.js:34621)
    at JitCompiler._compileTemplate (compiler.js:34596)
    at eval (compiler.js:34497)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34497)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24668)
    at JitCompiler._parseTemplate (compiler.js:34621)
    at JitCompiler._compileTemplate (compiler.js:34596)
    at eval (compiler.js:34497)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34497)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595) defaultErrorLogger @ core.js:1448 ErrorHandler.handleError @ core.js:1509 next @ core.js:5497 schedulerFn @ core.js:4331 SafeSubscriber.__tryOrUnsub @ Subscriber.js:243 SafeSubscriber.next @ Subscriber.js:190 Subscriber._next @ Subscriber.js:131 Subscriber.next @ Subscriber.js:95 Subject.next @ Subject.js:56 EventEmitter.emit @ core.js:4311 (anonymous) @ core.js:4771 ZoneDelegate.invoke @ zone.js:388 Zone.run @ zone.js:138 NgZone.runOutsideAngular @ core.js:4697 onHandleError @ core.js:4771 ZoneDelegate.handleError @ zone.js:392 Zone.runGuarded @ zone.js:154
_loop_1 @ zone.js:677 api.microtaskDrainDone @ zone.js:686 drainMicroTaskQueue @ zone.js:602 Promise.then (async) scheduleMicroTask @ zone.js:578 ZoneDelegate.scheduleTask @ zone.js:410 onScheduleTask @ zone.js:297 ZoneDelegate.scheduleTask @ zone.js:401 Zone.scheduleTask @ zone.js:232 Zone.scheduleMicroTask @ zone.js:252 scheduleResolveOrReject @ zone.js:862 resolvePromise @ zone.js:808 (anonymous) @ zone.js:724 webpackJsonpCallback @ inline.bundle.js:22 (anonymous) @ menu.module.chunk.js:1

Answer 1

通过将 FormsModule 添加到 @NgModule imports 数组，将其导入 menu.module.ts。在 app.module.ts.

中导入它是不够的

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { MenuRoutingModule } from './menu-routing.module';
import { MenuListComponent } from './menu-list/menu-list.component';

@NgModule({
  imports: [
    CommonModule,
    MenuRoutingModule,
    NgbModule,
    FormsModule // <-- add this
  ],
  declarations: [MenuListComponent]
})
export class MenuModule { }

延迟加载导致 'ngModel' 找不到问题

Lazy loading causing 'ngModel' cant find issue

angularjs-directive

angular