Werte wurden nicht korrekt von Eltern zu Kind übergeben

Ich bin neu in Angular2 und für Übungszwecke habe ich einen Satz von 3 Eingabekomponenten mit einer Reset-Taste erstellt, die die eingegebenen Werte löscht. Ich wollte den @Input Dekorator testen und wie Werte von Eltern zu Kindern übergeben werden. Die Frage in meinem Code ist, dass die Schaltfläche nur die Werte löscht, sobaldWerte wurden nicht korrekt von Eltern zu Kind übergeben

Hier ist der Code, die übergeordnete Komponente:

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

@Component({ 
    selector: 'app-root', 
    template: ` 
    <button (click)="reset()">Reset Age</button> 
    <app-form-user [age]="age" [name]="name" [surname]="surname"> 
    </app-form-user>`, 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    name; 
    surname; 
    age; 

    reset(){ 
    this.name = ''; 
    this.surname = ''; 
    this.age = 18; 
    } 
}

und die App-Form-Benutzerkomponente:

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

@Component({ 
    selector: 'app-form-user', 
    template: ` 
    <form> 
     <div> 
     <label>Name: </label> 
     <input type="text" value={{name}}/> 
     </div> 
     <div> 
     <label>Surname: </label> 
     <input type="text" value={{surname}}/> 
     </div> 
     <div> 
     <label>Age: </label> 
     <input type="number" value={{age}} min="18" max="100"/> 
     </div> 
    </form>`, 
    styleUrls: ['./form-user.component.css'] 
}) 
export class FormUserComponent implements OnInit { 

    constructor() { } 

    @Input() age; 

    @Input() name; 

    @Input() surname; 

    ngOnInit() { 
    this.age = 18; 
    } 

}

Jeder willkommen ist mehr als willkommen! Vielen Dank!

Quelle

2017-09-08 Anto

Angular Bereitstellung Direktive, um einige Variable an Eingabeelemente zu binden. Ich weiß nicht, warum Ihre Reset-Taste nur einmal funktioniert, aber Sie sollten sich die [(ngModel)] Direktive von FormsModule ansehen.

Siehe Two-way data binding with ngModel

<form> 
    <div> 
    <label>Name: </label> 
    <input type="text" [(ngModel)]="name"/> 
    </div> 
    <div> 
    <label>Surname: </label> 
    <input type="text" [(ngModel)]="surname"/> 
    </div> 
    <div> 
    <label>Age: </label> 
    <input type="number" [(ngModel)]="age" min="18" max="100"/> 
    </div> 
</form>

Und vergessen Sie nicht FormsModule in Ihrem Komponentenmodul zu importieren.

Quelle

2017-09-08 15:20:38

Vielleicht ist der Verweis auf die auf die Komponente Änderung gelieferten Werte auf Reset() und das ist, warum es funktioniert nur einmal? – fubbe

Die '@ Eingänge' "Alter", "Name" und "Nachname" scheint wörtlich zu sein, also glaube ich nicht, dass es ein Referenzproblem gibt. Ich denke, das Problem kam von der Art und Weise, wie der Wert an das HTML-Eingabeelement gebunden ist, mit einfachen bindenden –

Ich dachte darüber nach. Vielleicht hast du Recht. Ich erinnere mich irgendwo in den Dokumenten, dass es so etwas wie, dass es einen Unterschied zwischen Eigenschaften und Attributen gibt und die Art, wie es von der Dom gehandhabt wird. – fubbe

Sie sollten Änderungen binden in der übergeordneten Komponente an die untergeordnete Komponente:

Eltern HTML:

<app-form-user [(name)]="name"></app-form-user>

Kind HTML:

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

Kinderklasse:

@Input() name; 

    @Output() nameChange = new EventEmitter(); 
    constructor() { 
    } 

    onModelChange(event) {   
    this.nameChange.emit(event); 
    }

Working Demo

Quelle

2017-09-08 18:08:12 Vega

Werte wurden nicht korrekt von Eltern zu Kind übergeben

Antwort

Verwandte Themen