javascript - Angular : How to disable buttons creating via ngFor?

Question

我正在创建一个 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 创建的每个下拉菜单相关联。

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