Угловая 2 двухсторонняя привязка с использованием ngModel не работает

не может привязываться к 'ngModel', так как это не свойство know элемента 'input' и нет соответствующих директив с соответствующим свойством

Примечание: im с помощью альфа.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);
7 67
angularjs data-binding typescript 2-way-object-databinding

7 ответов:

Angular выпустила свою окончательную версию 15 сентября. В отличие от угловой 1 Вы можете использовать ngModel директива в Angular 2 для двухсторонней привязки данных, но вам нужно написать ее немного по-другому, например [(ngModel)] ( банан в коробке синтаксис). Почти все директивы Angular2 core не поддерживают вместо этого вы должны использовать camelCase.

теперь принадлежит FormsModule, поэтому import the FormsModule С @angular/forms модуль внутри imports опции метаданных AppModule(NgModule). После этого вы можете использовать ngModel директива внутри на вашу страницу.

приложения/приложение.деталь.ТС

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

приложения/приложение.модуль.ТС

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.ТС

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

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

Demo Plunkr

111

Ключевые Моменты:

  1. ngModel в angular2 действителен только в том случае, если FormsModule доступен как часть вашего AppModule.

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

  3. квадратные скобки [..] ссылается на привязку свойств.
  4. круг фигурные скобки (..) относится к привязке события.
  5. когда квадратные и круглые скобки соединяются как [(..)] относится к двусторонней привязке, обычно называемой банановая коробка.

Итак, чтобы исправить вашу ошибку.

Шаг 1: Импорт FormsModule

import {FormsModule} from '@angular/forms'

Шаг 2: добавить его в массив импорта ваш модуль как 

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

}
24

согласно Angular2 final, вам даже не нужно импортировать FORM_DIRECTIVES как было предложено выше многими. Однако, синтаксис был изменен как шашлык-дело было прекращено для улучшения.

просто заменить ng-model С ngModel и завернуть его в ящик бананов. Но теперь вы пролили код на два файла:

приложение.ТС:

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';
  }
}

приложение.модуль.ТС:

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);
8

Угловой 2 Бета

это ответ для тех, кто использует Javascript для AngularJS В. 2.0 бета.

использовать ngModel на ваш взгляд, вы должны сообщить компилятору angular, что вы используете директиву под названием ngModel.

как?

использовать ngModel в Angular2 Beta есть две библиотеки, и они ng.common.FORM_DIRECTIVES и ng.common.NgModel.

на самом деле ng.common.FORM_DIRECTIVES это не что иное, как группа директивы, которые полезны при создании формы. Она включает в себя

3

ответ, который помог мне: директива [(ngModel)]= больше не работает в rc5

подводя итог: поля ввода, теперь требуют собственность name в форме.

1

в приложение.модуль.ТС

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

позже в импорте декоратора @NgModule:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})
1

вместо ng-model вы можете использовать этот код:

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

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

внутри вашего приложения.деталь.ТС

0