ngModel을 사용한 Angular 2 양방향 바인딩이 작동하지 않습니다.

ngModel을 사용한 Angular 2 양방향 바인딩이 작동하지 않습니다.

'ngModel'은 'input' 요소의 know 속성이 아니며 해당 속성과 일치하는 디렉티브가 없으므로 바인딩할 수 없습니다.

주의: 알파를 사용하고 있습니다.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);

앵글은 9월 15일 최종 버전을 출시했다.Angular 1과 달리 사용할 수 있습니다.ngModel양방향 데이터 바인딩을 위해 Angular 2의 지시어를 사용하지만 다음과 같은 방법으로 작성해야 합니다.[(ngModel)](박스 구문의 바나나).거의 모든 angular2 코어 디렉티브는 지원되지 않습니다.kebab-case이제 대신, 당신은 그것을 사용해야 합니다.camelCase.

지금이다ngModel지시문은 에 속한다.FormsModule그렇기 때문에import그FormsModule부터@angular/forms모듈 내부imports메타데이터 옵션AppModule(NgModule).그 후 를 사용할 수 있습니다.ngModel지시문을 참조해 주세요.

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

앱/메인

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

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

데모 플렁커

요점:

1. ngModel in angular2는 FormsModule을 AppModule의 일부로 사용할 수 있는 경우에만 유효합니다.

2. ng-model구문적으로 틀렸습니다.

3. 각 괄호 [..]는 속성 바인딩을 나타냅니다.
4. 동그라미 괄호(..)는 이벤트바인딩을 나타냅니다.
5. 정사각형과 원 괄호를 함께 묶을 때 [(..)]는 일반적으로 바나나 박스라고 불리는 양방향 바인딩을 의미합니다.

그래서 실수를 고치기 위해서.

순서 1: Forms Module Import

import {FormsModule} from '@angular/forms'

순서 2: AppModule의 Import 어레이에 추가합니다.

imports :[ ... , FormsModule ]

순서 3: 변경ng-modelng모델(바나나박스 포함)로

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

주의: 또한 아래뿐만 아니라 양방향 데이터 바인딩도 별도로 처리할 수 있습니다.

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

valueChange(value){

}

제 경우 입력 요소에 "이름" 속성이 누락되어 있었습니다.

Angular2 파이널에서는 Import할 필요도 없습니다.FORM_DIRECTIVES이상과 같이 많은 사람들이 제안했듯이그러나 kebab-case가 삭제됨에 따라 구문이 변경되었습니다.

교환만 하면 됩니다.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.context.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);

나에게 도움이 된 답변:명령어 [(ngModel)]=가 rc5에서 더 이상 작동하지 않습니다.

요약하면: 입력 필드에 속성이 필요합니다.name형태로.

주의: ngModel이 reactive 형식으로 독립적으로 존재하려면 다음과 같이 ngModelOptions를 사용해야 합니다.

 [ngModelOptions]="{ standalone: true }"

예:

 <mat-form-field appearance="outline" class="w-100">
            <input
              matInput 
              [(ngModel)]="accountType"
              [ngModelOptions]="{ standalone: true }"
            />
 </mat-form-field>

app.module.ts로 이동합니다.

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

나중에 @NgModule 데코레이터 Import:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

각도 2 베타

이 답변은 angularJS v.2.0 베타용 Javascript를 사용하는 사용자를 위한 것입니다.

「」를 ngModel 말하는 것 .ngModel.

어떻게?

「」를 ngModelbeta에는 의 라이브러리가 , 그것들은 angular2 타타는2 타타 there there there there there there there there there there there 、 2 there there there there2 there there there there there there there there there there there there 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";
    },

});

이런 것들이 없어/ 틀렸어:

• 모듈 배열 Import Forms Module (ngModel에는 Forms Module 필요)
• ngModel은 다음과 같이 기술됩니다.

이렇게 하면 잘 될 거야!

새로운 버전의 Angular의 경우:

1. - 라고. - 라고.[(ngModel)] = yourSearch

2. 변수yourSearch.ts

3. FormsModuleapp.module.ts- ★★★★★★★@angular/forms;

4. 프로그램이 중일 응용 프로그램의 한 대로 응용 프로그램을 합니다.module.ts

ng-model 대신 다음 코드를 사용할 수 있습니다.

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.disc.ts

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

도움이 되었으면 좋겠다

AppModule에 FormsModule을 Import하여 사용자와의 양방향 바인딩 [(ngModel)]에서 작업합니다.

lazy loading 모듈을 사용하는 경우 현재 모듈에서 ngModule 및 formModule을 Import해야 합니다.예:

//shared.module.ts
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms'

imports: [
    FormsModule,]

이름 속성을 추가하면 문제가 해결되었습니다.

언급URL : https://stackoverflow.com/questions/31623879/angular-2-two-way-binding-using-ngmodel-is-not-working