0

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

我一直收到这个错误

未处理的承诺拒绝：模板解析错误：无法绑定到“ngModel”，因为它不是“输入”的已知属性。(" name: ][(ngModel)]="hero.name" placeholder="name"> "): AppComponent@5:12 ; 区域：; 任务：Promise.then；值：错误：模板解析错误：(...) 错误：模板解析错误：无法绑定到“ngModel”，因为它不是“输入”的已知属性。(" name: ][(ngModel)]="hero.name" placeholder="name"> "): AppComponent@5:12

我将我的代码与页面上的代码并排查看，甚至复制了他们的代码，看看我在粘贴时是否注意到任何地方有任何不同，果然它是完全相同的，并且这个错误仍然发生。

我在这个问题上发现的大约 98% 的信息恰好是基于他们忘记导入 FormsModule，我不是这种情况。我什至尝试将它导入到其他 .ts 文件中，以查看是否发生了任何事情，但并没有解决问题。

我遇到另一个提到 angular/forms 依赖项必须为 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 { }

应用程序组件.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'
    };
}

索引.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>

包.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 文件是否会有所作为，但我认为目前这可能是矫枉过正，如果这没有显示问题并且你们想看看让我知道我会包括他们。

4

1 回答 1

1

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

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 { }
于 2017-05-10T21:01:24.233 回答