Question

我正在尝试使用*ngFor创建一个包含复选框的动态列表。在这里，我希望一次只能检查一个复选框（如果用户点击之前选择的第二个复选框，则应该取消选中）。

<div class="img-prev col-md-12" *ngFor="let imgList of uploadedImg; let i = index">
  <div class="col-md-1">
      <input [ngModel]= "selectImg" (click)="updateSelection(i, imgList)" type="checkbox" /> 
  </div>
</div>

Answer 1

实现自定义ISelectable接口会更有效。就像这样。

export interface ISelectable {

selected?: boolean;}

然后，对于要表示可选UI元素的每个对象，您都可以实现ISelectable。

例如：

export class SelectableImg implements ISelectable....

然后在模板中，您可以使用img.selected控制[checked]绑定。

    <div class="img-prev col-md-12" *ngFor="let imgList of uploadedImg; let i = index">
  <div class="col-md-1">
      <input [ngModel]= "selectImg" [checked]="imgList.selected"(click)="updateSelection(i, imgList)" type="checkbox" /> 
  </div>

创建一个deselectAll方法：

private deselectAll(arr: any[]){
arr.forEach(val =>{
    if(val.selected){
        val.selected = false;
    }
})}

你的事件处理程序

private updateSelection(selectedOption){

let selected = selectedOption.selected;

this.deselectAll(this.allVals);

selectedOption.selected = !selected;
}

角度2，* ng复选框只检查一个

1 个答案: