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

删除功能只是远程API的http.delete()。

我的问题是：因为我在循环中，所以如何将复选框与我的按钮的禁用状态绑定？

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>

Angular2复选框以启用ngFor中的按钮

1 个答案: