Angular：如何禁用通过 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;
}

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

Answer 3

您可以向customers 对象添加自定义属性。

工作堆栈闪电战：https://stackblitz.com/edit/angular-2m8ns7?file=src%2Fapp%2Fapp.component.ts

示例代码：

<div *ngFor="let c of customers; let i = index">
  <span>{{c.name}} {{c.surname}} | is Enabled? : {{c.isEnabled}}</span> 
  <button (click)="toggleMe(i)">Toggle status</button>
</div>

从'@angular/core'导入{组件}；

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public customers : any[] = [];

  constructor(){
     this.customers = [
    {
      name: "Jhon",
      surname: "Cena",
      isEnabled: false
    },

    {
      name: "Mike",
      surname: "Mya",
      isEnabled: false
    },

    {
      name: "Sandy",
      surname: "Rivers",
      isEnabled: false
    }
  ];
  }

  toggleMe(i){
    this.customers[i].isEnabled = !this.customers[i].isEnabled;
  }
}