Il binding bidirezionale angolare 2 utilizzando ngModel non funziona


101

Impossibile collegarsi a "ngModel" poiché non è una proprietà conosciuta dell'elemento "input" e non ci sono direttive corrispondenti con una proprietà corrispondente

Nota: sto usando alpha.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);

Risposte:


151

Angular ha rilasciato la sua versione finale il 15 settembre. A differenza di Angular 1 puoi usare la ngModeldirettiva in Angular 2 per il data binding bidirezionale, ma devi scriverlo in un modo leggermente diverso come [(ngModel)]( sintassi Banana in a box ). Quasi tutte le direttive di base di angular2 non supportano kebab-caseora invece dovresti usare camelCase.

Ora la ngModeldirettiva appartiene a FormsModule, ecco perché dovresti usare importl' opzione FormsModulefrom @angular/formsmodule inside importsmetadata di AppModule(NgModule). Successivamente puoi usare la ngModeldirettiva all'interno della tua pagina.

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

Demo Plunkr


46

Punti chiave:

  1. ngModel in angular2 è valido solo se FormsModule è disponibile come parte del tuo AppModule.

  2. ng-model è sintaticamente sbagliato.

  3. parentesi quadre [..] si riferisce alla proprietà vincolante.
  4. le parentesi graffe circolari (..) si riferiscono all'associazione di eventi.
  5. quando le parentesi quadre e circolari sono messe insieme come [(..)] si riferisce alla rilegatura a due vie, comunemente chiamata scatola a banana.

Quindi, per correggere il tuo errore.

Passaggio 1: importazione di FormsModule

import {FormsModule} from '@angular/forms'

Passaggio 2: aggiungilo all'array di importazione del tuo AppModule come

imports :[ ... , FormsModule ]

Passaggio 3: cambia ng-modelcome ngModel con scatole di banana come

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

Nota: inoltre, è possibile gestire l'associazione dati bidirezionale separatamente come di seguito

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

valueChange(value){

}

9

Come per Angular2 final, non devi nemmeno importare FORM_DIRECTIVEScome suggerito da molti sopra. Tuttavia, la sintassi è stata cambiata poiché il kebab-case è stato abbandonato per il miglioramento.

Basta sostituire ng-modelcon ngModele avvolgerlo in una scatola di banane . Ma ora hai suddiviso il codice in due file:

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



4

Nell'app.module.ts

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

Più avanti nell'importazione del decoratore @NgModule:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

3

Angular 2 Beta

Questa risposta è per coloro che utilizzano Javascript per angularJS v.2.0 Beta.

Per usarlo ngModelnella tua vista dovresti dire al compilatore di angular che stai usando una direttiva chiamata ngModel.

Come?

Per utilizzare ngModelci sono due librerie in angular2 Beta, e sono ng.common.FORM_DIRECTIVESe ng.common.NgModel.

In realtà ng.common.FORM_DIRECTIVESnon è altro che un gruppo di direttive utili quando si crea un modulo. Include NgModelanche la direttiva.

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

});

Cordiali saluti NgModel è in FORM_DIRECTIVES, quindi potresti anche: directives: [ng.common.FORM_DIRECTIVES]
Peter J. Hart

1
@ PeterJ.Hart, In realtà ng.common.NgModelcontiene la definizione per la direttiva ngModel. ng.common.FORM_DIRECTIVESsta raggruppando alcune direttive incluse ngModelche sono utili se i form. Quindi non vogliamo includere tutte le direttive per il modulo includi solong.common.FORM_DIRECTIVES
Abhilash Augustine

0

invece di ng-model puoi usare questo codice:

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

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

all'interno della tua app.component.ts


0

Aggiungi sotto il codice ai seguenti file.

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 ]
})

Spero che questo ti aiuti


0

importa FormsModule nel tuo AppModule per lavorare con l'associazione bidirezionale [(ngModel)] con il tuo


1
Quando possibile, cerca di fornire spiegazioni aggiuntive anziché solo codice. Tali risposte tendono ad essere più utili in quanto aiutano i membri della comunità e in particolare i nuovi sviluppatori a comprendere meglio il ragionamento della soluzione e possono aiutare a prevenire la necessità di rispondere alle domande di follow-up.
Rajan
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.