web-dev-qa-db-fra.com

angular2 ngModel avec la valeur de @Input

J'essaie d'utiliser [(ngModel)] dans mon composant enfant avec une chaîne passée de mon parent à mon composant enfant via @Input ().

Cependant, la liaison à double sens ne semble pas fonctionner. La chaîne est passée correctement du parent, mais lorsque je la modifie dans l'enfant, la valeur du parent n'est pas mise à jour.

Qu'est-ce que je rate?

Parent:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <child [(value)]="name"></child>
      <p>{{name}}</p>
    </div>
  `,
})
export class App {
  name:string = 'MyValue';
  constructor() {

  }
}

Enfant

import {Component, Input} from '@angular/core'

@Component({
  selector: 'child',
  template: `
    <div>
    <p>My custom input</p>
      <textarea [(ngModel)]="value"></textarea>
    </div>
  `,
})
export class Child {


  @Input() value:string;

  constructor() {

  }
}

J'ai créé un plnkr qui illustre le problème: https://plnkr.co/edit/jCF5kt73P38EFYUAZF6l

angulartypescriptangular2-forms
5
Korgen

Vous avez besoin d'une sortie pour signaler les modifications:

import {Component, Input} from '@angular/core'

@Component({
  selector: 'child',
  template: `
    <div>
    <p>My custom input</p>
      <textarea [(ngModel)]="value" (ngModelChange)="update($event)"></textarea>
    </div>
  `,
})
export class Child {


  @Input() value:string;
  @Output() valueChange:EventEmitter<string> = new EventEmitter<String>()

  update(value) {
    this.valueChange.emit(value);
  }

  constructor() {

  }
}
6
Günter Zöchbauer

Ouais - @Input ne fonctionne que dans un sens. Lorsque le parent change la valeur de Input, l'enfant est notifié. Cependant, le parent n'est pas au courant des modifications apportées à l'enfant si vous utilisez seulement en utilisant @Input.

0
Aardvark

Dans le prolongement de la réponse @ Günter Zöchbauer, j'ai également modifié le fichier app.ts.

app.ts:

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {Child} from './child'
import {FormsModule} from "@angular/forms";

@Component({
  selector: 'my-app',
  template: `
    <div>
      <child [value]="name" (valueChange)= "updateValue($event)"></child>
      <p>{{name}}</p>
    </div>
  `,
})
export class App {
  name:string = 'MyValue';
  constructor() {

  }
   updateValue(value){
      this.name = value;
    }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App, Child ],
  bootstrap: [ App ]
})
export class AppModule {}

Enfant

import {Component, Input, Output, EventEmitter} from '@angular/core'

@Component({
  selector: 'child',
  template: `
    <div>
    <p>My custom input</p>
      <textarea [(ngModel)]="value" (ngModelChange)="update($event)"></textarea>
    </div>
  `,
})
export class Child {


  @Input() value:string;
 @Output() valueChange:EventEmitter<string> = new EventEmitter<String>();

  constructor() {

  }

  update(value) {
    this.valueChange.emit(value);
  }
}
0
Amit Chigadani