Кутове 2 двостороннє зв’язування за допомогою ngModel не працює

Неможливо прив’язати до 'ngModel', оскільки це не властивість знати елемент 'input' і немає відповідних директив із відповідним властивістю

Примітка: я використовую альфа.31

import { Component, View, bootstrap } from 'angular2/angular2'

@Component({
    selector: 'data-bind'
})
@View({
    template:`
        <input id="name" type="text" 
            [ng-model]="name" 
            (ng-model)="name = $event" />
        {{ name }}
    ` 
})
class DataBinding { 
    name: string;

    constructor(){
        this.name = 'Jose';
    }
}

bootstrap(DataBinding);

Angular випустив остаточну версію 15 вересня. На відміну від Angular 1, ви можете використовувати ngModelдирективу в Angular 2 для двостороннього прив'язки даних, але вам потрібно записати їх дещо інакше, як [(ngModel)]( Banana в синтаксисі поля ). Практично всі основні директиви angular2 зараз не підтримують, kebab-caseзамість цього слід використовувати camelCase.

Тепер ngModelдиректива належить FormsModule, тому ви повинні від модуля всередині метаданих опції (NgModule). Після цього ви можете використовувати директиву всередині на своїй сторінці.importFormsModule@angular/formsimportsAppModulengModel

app / app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1>
    <input type="text" [(ngModel)]="myModel"/>
    {{myModel}}
  `
})
export class AppComponent { 
  myModel: any;
}

app / 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 ], //< added FormsModule here
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

app / main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

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

Демо Плункр

Ключові моменти:

1. ngModel в angular2 є дійсним лише в тому випадку, якщо FormsModule доступний у складі вашої AppModule.

2. ng-model синтаксично неправильно.

3. квадратні дужки [..] відноситься до властивості прив'язки.
4. дужки кола (..) посилаються на прив'язку події.
5. коли квадратні та круглі дужки складаються разом, як [(..)] посилається на двостороння палітурка, звичайно звану коробкою з бананом.

Отже, щоб виправити свою помилку.

Крок 1: Імпорт FormsModule

import {FormsModule} from '@angular/forms'

Крок 2. Додайте його до імпорту масиву вашого AppModule як

imports :[ ... , FormsModule ]

Крок 3: Змініть ng-modelяк ngModel з банановими коробками як

 <input id="name" type="text" [(ngModel)]="name" />

Примітка. Крім того, ви можете обробляти двостороння прив'язка даних окремо, як і нижче

<input id="name" type="text" [ngModel]="name" (ngModelChange)="valueChange($event)"/>

valueChange(value){

}

Відповідно до фіналу Angular2, вам навіть не потрібно імпортувати, FORM_DIRECTIVESяк запропоновано багатьма. Однак синтаксис було змінено, оскільки кебаб-випадок випав на покращення.

Просто замініть ng-modelз ngModelі загорнути його в коробку бананів . Але зараз ви розлили код на два файли:

app.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'ng-app',
  template: `
    <input id="name" type="text" [(ngModel)]="name"  />
    {{ name }}
  `
})
export class DataBindingComponent {
  name: string;

  constructor() {
    this.name = 'Jose';
  }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DataBindingComponent } from './app'; //app.ts above

@NgModule({
  declarations: [DataBindingComponent],
  imports:      [BrowserModule, FormsModule],
  bootstrap:    [DataBindingComponent]
})
export default class MyAppModule {}

platformBrowserDynamic().bootstrapModule(MyAppModule);

У моєму випадку на моєму вхідному елементі мені не було атрибута "name".

Відповідь, яка мені допомогла: Директива [(ngModel)] = більше не працює в rc5

Підсумовуючи це: зараз поля введення вимагають властивості nameу формі.

В app.module.ts

import { FormsModule } from '@angular/forms';

Пізніше під час імпорту декоратора @NgModule:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Кутова 2 бета

Ця відповідь призначена для тих, хто використовує Javascript для angularJS v.2.0 Beta.

Для використання ngModelу вашому представленні ви повинні сказати компілятору angular, що ви використовуєте директиву з назвою ngModel.

Як?

Для використання ngModelє дві бібліотеки у angular2 Beta, і вони є ng.common.FORM_DIRECTIVESі ng.common.NgModel.

Насправді ng.common.FORM_DIRECTIVESце не що інше, як група директив, які корисні при створенні форми. Вона також включає NgModelдирективу.

app.myApp = ng.core.Component({
    selector: 'my-app',
    templateUrl: 'App/Pages/myApp.html',
    directives: [ng.common.NgModel] // specify all your directives here
}).Class({
    constructor: function () {
        this.myVar = {};
        this.myVar.text = "Testing";
    },

});

імпортуйте FormsModule у ваш AppModule для роботи з двостороннім зв'язуванням [(ngModel)] зі своїм

замість ng-моделі ви можете використовувати цей код:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<input #box (keyup)="0">
    <p>{{box.value}}</p>`,
})
export class AppComponent  {}

всередині вашого app.component.ts

Додайте код нижче до наступних файлів.

app.component.ts

<input type="text" [(ngModel)]="fname" >
{{fname}}
export class appcomponent {
fname:any;
}

app.module.ts

import {FormsModule} from '@angular/forms';
@NgModule({
imports: [ BrowserModule,FormsModule ],
declarations: [ AppComponent],
bootstrap:    [ AppComponent ]
})

Сподіваюся, це допомагає