Javascript 角度：如何禁用通过ngFor创建按钮？

我正在创建一个html表。其中有一个按钮单元和一个通过ngFor创建的下拉列表。如果没有从下拉列表中选择值，如何禁用通过ngFor生成的按钮。我试过这个：

在AppComponent中，我有如下内容：

ts

html

---

该代码的问题是，如果从任何下拉列表中选择值，它将启用所有按钮。我想要的是只启用下拉列表前面的按钮。如何将每个按钮与我通过ngFor创建的每个下拉列表相关联。

那么您应该在customer中存储一些值，以便每个迭代都有自己的级别变量。我根据约定更改了方法名称

{{customer.uid} {{customer.name} {{customer.level}} -选择一个选项- 一级 二级 邮寄 客户：阵列=[]； onLevel ChangeEvent：事件，客户{ 常量值=event.target.value； 顾客水平=价值； //如果编译器抱怨客户没有级别属性 //你可以做以下事情 //客户['level']=价值； }

---

试着这样做：

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

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

---

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

工作人员突击检查：

示例代码：

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

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

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

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