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>