Question

无法使用ng-model。即使在导入后我也会收到此错误 app.module.ts中的formsmodule下面是我的文件组件和模块。请纠正我错在哪里。在此先感谢

Promise rejection: Template parse errors:
Can't bind to 'ng-model' since it isn't a known property of 'input'. ("
             <div>
                  <label>name: </label>
                  <input type="text" [ERROR ->][(ng-model)]="hero.name" placeholder="name">
             </div>
  "): ng:///AppModule/AppComponent.html@5:28 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:`enter code here`
Can't bind to 'ng-model' since it isn't a known property of 'input'. ("
             <div>
                  <label>name: </label>
                  <input type="text" [ERROR ->][(ng-model)]="hero.name" placeholder="name">
             </div>
  "): ng:///AppModule/AppComponent.html@5:28
    at syntaxError (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34) [<root>]
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:11522:19) [<root>]
    at JitCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25296:39) [<root>]
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25220:62) [<root>]
    at Set.forEach (native) [<root>]
    at JitCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25220:19) [<root>]
    at createResult (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25105:19) [<root>]
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:125:43) [<root> => <root>]
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:760:57 [<root>]
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:165:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:593:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:464:25) [<root>] Error: Template parse errors:

这是我的app.module.ts：

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

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

这是我的app.component.ts：

import { Component } from '@angular/core';
export class Hero{
    id: number;
    name: string;
}
@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
            <h2>{{hero.name}} details!</h2>
            <div><label>id: </label>{{hero.id}}</div>
             <div>
                  <label>name: </label>
                  <input type="text" [(ng-model)]="hero.name" placeholder="name">
             </div>
  `
})
export class AppComponent  {
 title = 'Angular';
     hero :Hero = {
        id: 1,
        name: 'windstorm' 
     };
  }

Answer 1

它是ngModel，而不是ng-model。

所以它应该是：

<input type="text" [(ngModel)]="hero.name" placeholder="name">

请参阅Template Syntax。

无法使用ng-model

1 个答案: