2016-06-30 9 views
0

Hier ist eine vereinfachte Version von dem, was ich habe ...Angular2 - klar mehrere Eingabefelder mit einem ngFor erstellt Schleife

Die Komponente:

... 
ngOnInit() { 

    items = [ 
     { 
      "image": "/img1.jpg", 
      "answer" : "item1" 
     }, 
     { 
      "image": "/img2.jpg", 
      "answer" : "item2" 
     }, 
     { 
      "image": "/img3.jpg", 
      "answer" : "item3" 
     }, 
    ] 

} 

verify(event:any, i) { 
    ...checking if the input matches its answer. No problem here. 
} 

HTML-Template:

<template ngFor let-item let-i="index" [ngForOf]="items"> 
    <li> 
     <div style="background: url('{{item.image}}')"></div> 
     <input type="text" [(ngModel)]="item.input" (keyup)="verify($event, i)"> 
    </li> 
</template> 

<button type="button" (click)="clearFields()"></button> 

Wie funktioniert die Funktion clearFields()? Ich möchte das Umleiten nicht verwenden, da andere Komponenten auf derselben Seite vorhanden sein können.

+0

was meinst du mit Umleitungen? – maxisam

+0

Ich meine, indem ich nicht weg und zurück zur Seite navigiere. –

+0

sollte es nicht. aber du kannst 'type =" button "' auf deiner taste hinzufügen – maxisam

Antwort

1

Sie können eine Funktion wie das machen:

clearFields() { 
    for (let item of this.items) { 
    item.input = ""; 
    } 
} 
Verwandte Themen