Angular2複選框，在ngFor

Question

啓動按鈕

我的問題將肯定似乎對一些人來說很簡單，但我很難找到一個簡單的解決方案來實現這一目標：

• 在ngFor循環，我展示了一些物品ID和日期。在每個項目上，我想添加一個刪除按鈕。

• 這個按鈕在默認情況下是禁用的，只有當我勾選一個複選框（作爲刪除確認）時纔會被激活。

這裏是我的代碼：

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

在app.component.ts，只有一個變量要經過：

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

刪除功能僅僅是一個http.delete()遠程API。

我的問題是：如何噸複選框與禁用我的按鈕狀態，因爲我在一個循環內？

Answer 1

可以在itemsArray添加一個字段作爲

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

，然後在模板ü可以作爲

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