Question

在我的角度应用程序中，我正在尝试在产品之间实现比较功能。我有一个产品列表，其中包含为每个产品生成的复选框。最初，所有复选框都将取消选中。当我单击产品的复选框时，我正在检查要比较的所选产品总数是否不大于2.如果它大于2，则复选框应取消选中。我尝试使用以下代码但没有成功。对此有任何帮助非常感谢。

HTML：

 <div *ngFor="let att of displayProduct ">
   {{att.productName}}
   <input type="checkbox" name="att.productId" value="compare" 
   (change)="checkBoxClicked(att.productId)"
   [checked]= "test(att.productId)"> Compare
 </div>

TS：

compareList: string = [];
checkBoxClicked(val: string){
    if (this.compareList.length<2){
    this.compareList.push(val);
    }
    this.test(val);
}
test(val: string){
if (_.find(this.compareList, function(data ){return data == val }) === undefined){
    return false;
    }
    else {
    return true;
    }
}

Answer 1

Html：

  <div *ngFor="let att of displayProduct ">
   {{att}}
   <input type="checkbox" name="att" value="compare" 
   (change)="checkBoxClicked($event, att)"> Compare
 </div>

TS：

checkBoxClicked(e, value: string){
    if (this.compareList.length<2 && e.currentTarget.checked){     
        this.compareList.push(value); //adding checked value to the list     
    }
    else  if(!e.currentTarget.checked){
        var index = this.compareList.indexOf(value);
        if (index > -1) {
            this.compareList.splice(index, 1); //removing when unchecked
        }
      }
    else  
      e.currentTarget.checked = false;  //not selecting if list length > 2  
  }

请查看内联评论。

Answer 2

由于角度正在更新，它为我们提供了许多新功能。您可以使用mat组件来执行这些专门为此设计的操作。

请在下面找到示例：

HTML CODE

  <mat-list>
    <mat-list-item id="columnInfo" *ngFor="let att of displayProduct">
      <mat-checkbox (click)="$event.stopPropagation()" 
        (change)="$event ? prodSelection.toggle(att.id) : null" 
        [checked]="prodSelection.isSelected(att.productId)">
        {{ att.productName }}
      </mat-checkbox>
    </mat-list-item>
  </mat-list>

对于TS文件，您可以使用SelectionModel专门为此类操作设计的类。选择全局变量：

  prodSelection = new SelectionModel<string>(true, []);

并在HTML中引用它，就像我在示例中提到的那样。请参阅此链接mat-checkbox以获得进一步说明。

根据动态生成输入的条件设置复选框值

2 个答案: