Question

从昨天开始，我一直被困在本教程的数据绑定部分 https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

我一直在收到此错误

未处理的承诺拒绝：模板解析错误：无法绑定到'ngModel'，因为它不是'input'的已知属性。（” 名称： ] [（ngModel）] =“hero.name”占位符=“名称”＆gt; “）：AppComponent @ 5:12;区域：;任务：Promise.then;值：错误：模板解析错误：（...）错误：模板解析错误：无法绑定到'ngModel'，因为它不是'input'的已知属性。（” 名称： ] [（ngModel）] =“hero.name”占位符=“名称”＆gt; “）：AppComponent @ 5:12

我将代码与页面上的代码并排查看，甚至复制了他们的代码，看看我粘贴时是否注意到任何差异，确定它完全相同，但仍然发生了这个错误。 / p>

我在这个问题上发现的大约98％的信息恰好是基于他们忘记导入FormsModule，但事实并非如此。我甚至尝试将其导入到其他.ts文件中，只是为了查看是否有任何问题，并且它无法解决问题。

我遇到另一个提到角度/表格依赖性必须是0.3.0或更高，我检查了包文件，看到我正在使用2.1.1

我去年安装了Node并且直到现在还没有真正弄乱它，我有Windows Vista所以我无法获得最新版本，我的版本是5.7.0而我使用的是npm 3.6.0

这是我的代码

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.componet.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 [(ngModel)]="hero.name" placeholder="name">
               </div>`
})

export class AppComponent {
    title   =   'Tour of Heroes';
    hero: Hero = {
    id: 1,
    name: 'Windstorm'
    };
}

的index.html

<!DOCTYPE html>
 <html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>
     <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
   </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

的package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
     }
  ],
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "angular-in-memory-web-api": "~0.1.13",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3"
  }
}

我不知道当节点明星有所不同时，他们渲染的.js文件是否存在差异，但我认为此刻可能有些过分，如果这没有显示问题并且你们想看一看让我知道，我会把它们包括在内。

Answer 1

你的app模块应该是这样的：

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 { }

Angular 2：在app.module

1 个答案: