Angular2 Checkbox-Taste aktivieren in ngFor

Question

Mein Problem wird sicher sehr einfach für manche Leute scheint aber ich kämpfen, eine einfache Lösung zu finden, um dieses zu erreichen:

• In einer ngFor Schleife, ich zeigen einige Artikel-ID und Datum. Auf jedem Artikel möchte ich eine Schaltfläche zum Löschen hinzufügen.

• Diese Schaltfläche ist standardmäßig deaktiviert und wird nur aktiviert, wenn ich ein Kontrollkästchen ankreuze (als Bestätigung für das Löschen).

Hier ist mein Code:

<tr *ngFor="let item of itemsArray "> 
    <td>{{item .date | date:'short'}}</td> 
    <td>{{item .id}}</td> 
    <td>Delete? 
     Yes, Sure: <input type="checkbox"> 
     <br> 
     <button [disabled]="" (click)="delete(item .id")></button> 
    </td> 
<tr> 

Auf app.component.ts, gibt es nur eine Variable zu durchlaufen:

const itemsArray = [ 
    {id: 1, date: 1488170777813}, 
    {id: 2, date: 1488170777813}, 
    {id: 5, date: 1488170777813}, 
    {id: 3, date: 1488170777813}, 
    {id: 4, date: 1488170777813} 
]; 

Löschen-Funktion ist nur ein http.delete() zu Fern API.

Meine Frage ist: Wie binden Sie die Checkbox mit deaktivieren Zustand meiner Taste, da ich in einer Schleife bin?

Answer 1

Sie können in Array Zeilen als

const itemsArray = [ 
    {id: 1, date: 1488170777813, disabled: true}, 
    {id: 2, date: 1488170777813, disabled: true}, 
    {id: 5, date: 1488170777813, disabled: true}, 
    {id: 3, date: 1488170777813, disabled: true}, 
    {id: 4, date: 1488170777813, disabled: true} 
]; 

Und dann in der Vorlage ein weiteres Feld hinzufügen kann u verwenden als

<tr *ngFor="let item of itemsArray"> 
    <td>{{item.date | date:'short'}}</td> 
    <td>{{item.id}}</td> 
    <td>Delete? 
     Yes, Sure: <input type="checkbox" [(ngModel)]="item.disabled" checked="!item.disabled"> 
     <br> 
     <button [disabled]="item.disabled" (click)="delete(item.id")></button> 
    </td> 
</tr>