Question

我正在构建一个*ngFor动态单选按钮。我需要添加某种可用于确定按钮是否处于活动状态的属性。这不是出于功能性目的，选择会以我的反应形式很好地构建属性。目的是为了满足测试。

   <label *ngFor="let order of orders">
    <input formControlName="orders" type="radio" name="orders" [value]="order.id" />
    {{order.name}}
  </label>

我尝试添加一个checked属性，但这只是将该属性添加到所有无线电中。我以为angular提供了ngChecked属性，但我认为这是针对AngularJS的。

任何确定/显示所选无线电处于活动状态的解决方案都是解决方案。

https://stackblitz.com/edit/angular-t2gd4g

Answer 1

在您的.ts文件中声明如下的changeHandler（）函数：

  changeHandler(index){
     console.log(`radio-button ${index+1} is active`);
  }

在.html文件中，在*ngFor中声明index，可用于查找复选框的当前状态。因此，以下演示显示了哪个复选框处于活动状态：

    <label *ngFor="let order of orders; let i = index;">
       <input formControlName="orders" type="radio" name="orders" [value]="order.id"  (ngModelChange)="changeHandler(i)"/>
       {{order.name}}
    </label>

演示： enter link description here

注意：：请参阅控制台以查看活动按钮

Answer 2

只需获取表单控件orders的值，您便会知道所选的控件，或者在应用spesifect设计的情况下，可以为所选的控件添加选中的类

  <label *ngFor="let order of orders"  
           [ngClass]="{'checked':form.get('orders').value == order.id}">
    <input formControlName="orders" type="radio" name="orders" [value]="order.id"  />
    {{order.name}}
  </label>

通过创建属性来获取所选订单的另一种方法

  get selectedOrder() { 
    const selected =this.form.get('orders').value;
    if (selected) { 
      return this.orders.find(o => o.id == selected )
    } else {
      return null
    }
  }

demo ?

将选中的属性添加到动态单选按钮

2 个答案: