Угловое 2: «Не может связываться с„ngModel“» ошибка при FormsModule импортируется в app.module

Я застрял на данных, поскольку связывающими часть этого урока вчера https://angular.io/docs/ts/latest/tutorial/toh-pt1.html Угловое 2: «Не может связываться с„ngModel“» ошибка при FormsModule импортируется в app.module

Я был получаю эту ошибку

Unhandled Promise rejection: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. (" name: ][(ngModel)]="hero.name" placeholder="name"> "): [email protected]:12 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. (" name: ][(ngModel)]="hero.name" placeholder="name"> "): [email protected]:12

Я посмотрел на код бок о бок с кодом на странице и даже скопировал свой код, чтобы увидеть, если я заметил разницу в любом месте, когда я вставил его, достаточно уверен, что это был точно такой же, и эта ошибка все же произошла.

Около 98% информации, которую я нашел по этой проблеме, были основаны вокруг них, забыв импортировать FormsModule, это не тот случай со мной. Я даже попытался импортировать его в другие файлы .ts только для того, чтобы увидеть, если что-нибудь случится, и это не устранило проблему.

я наткнулся на другой, который упоминается зависимость угловой/формы должны были быть 0.3.0 или выше, я проверил файл пакета и видел я использую 2.1.1

я установил узел в прошлом году и убежище «т действительно перепутались с ним до сих пор, у меня есть Windows Vista, так что я не мог получить новейший один и моя версия 5.7.0 и я использую НПМ 3.6.0

Вот мой код

основной .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-файлы t hey render, когда звезды узлов имеют значение, но я полагаю, что на данный момент это может быть излишним, если это не покажет проблему, и вы, ребята, хотите взглянуть, дайте мне знать, и я включу их.

источник

2016-10-30 Optiq

Ваш app.component и app.module код точно так же? – deek

да я просто поймал это сам и обновил его, скопировал неправильный файл lol – Optiq

сменить героя: Hero to hero: any. – deek

ваш модуль приложение должно быть что-то вроде этого:

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-10 21:01:24 Houtan

Угловое 2: «Не может связываться с„ngModel“» ошибка при FormsModule импортируется в app.module

ответ

Смежные вопросы