javascript - Angular：如何禁用通过 ngFor 创建的按钮？

我正在创建一个 HTML 表格。在其中有一个单元格包含一个按钮和一个通过 ngFor 创建的下拉菜单。如果下拉菜单未选择任何值，如何禁用通过 ngFor 生成的按钮。我尝试过这个：

在 AppComponent 中，我有类似这样的东西：

ts

customers: Array<Object> = [];
level: string;

changedvalue(event: Event) {
   const value = (<HTMLSelectElement>event.target).value;
   this.level = value;
  }

html

<tbody>
<tr *ngFor="let customer of customers">
     <td> {{ customer.uid }} </td>

     <td> {{ customer.name }} </td>

     <td> {{ customer.level }}</td>

     <td>
     <select (change)="changedvalue($event)" class="form-control" name="level">
        <option  hidden selected> -- select an option -- </option>
        <option>Level 1</option>
        <option>Level 2</option>
     </select>
     </td>

    <td><button [disabled]=!level >Send</button></td>

</tr>
</tbody>

这个代码的问题是，如果从任何下拉菜单中选择值，它会启用所有按钮。我想要的是只启用那个位于对应下拉菜单前面的按钮。如何将我通过 ngFor 创建的每个按钮与每个下拉菜单关联起来。

答案＃1

那么你应该在 customer 中存储一些值，这样每次迭代都会有它自己的 level 变量。我根据规范更改了方法名称。

<tbody>
    <tr *ngFor="let customer of customers">
         <td> {{ customer.uid }} </td>

         <td> {{ customer.name }} </td>

         <td> {{ customer.level }}</td>

         <td>
         <select (change)="onLevelChange($event, customer)" class="form-control" name="level">
            <option  hidden selected> -- select an option -- </option>
            <option>Level 1</option>
            <option>Level 2</option>
         </select>
         </td>

        <td><button [disabled]=!customer.level >Send</button></td>

    </tr>
</tbody>

customers: Array<Object> = [];

onLevelChange(event: Event, customer) {
   const value = (<HTMLSelectElement>event.target).value;
   customer.level = value;
   // if compiler complains as "there is no level property of customer"
   // you can do following
   // customer['level'] = value;
}

答案＃2

试试像这样的东西：

手动为您的客户模型添加级别，然后执行以下操作

<tbody>
<tr *ngFor="let customer of customers">
     <td> {{ customer.uid }} </td>

     <td> {{ customer.name }} </td>

     <td> {{ customer.level }}</td>

     <td>
     <select (change)="customer.level = !customer.level" class="form-control" name="level">
        <option  hidden selected> -- select an option -- </option>
        <option>Level 1</option>
        <option>Level 2</option>
     </select>
     </td>

    <td><button [disabled]=!customer.level >Send</button></td>

</tr>
</tbody>