Question

我有这个对象数组。每个对象中都有另一个数组。

panels = [{
  Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd",
  Name: "Celiac test",
  Tests: [{
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 1 (DGP) IgG"
    },
    {
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 2 (DGP) IgG"
    },
    {
      Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
      Name: "test 3 (DGP) IgG"
    }
  ]
}, and so on],

我已将其映射到带有复选框的引导手风琴。

首先有一个用于主要对象的复选框，然后是该对象内的数组的复选框。

我想要的是，当我单击“主面板”复选框时，应选择“测试”复选框，并将面板对象保存在对象变量中，例如 selectedPanel ，而当我取消选择主面板时，它将也应该取消选中所有“测试”复选框。

但是最主要的是，当我取消选择“测试”复选框之一时，应将其从selectedPanel中删除。

问题是应该基于 Id 完成，而不是从后端进行检查/选择。

有人可以在这方面帮助我吗？

我也创建了一个堆叠闪电战：

Stackblitz

Answer 1

首先创建一个数组，其中将保留选中的复选框。该数组将保存所选面板/测试的ID。

selectedCheckboxes: [];

要使用复选框“ checked”属性进行绑定，您需要为对象添加另一个参数，为简单起见，我们将其称为“ checked”。

checked: true/false

在您的HTML代码中

<input type="checkbox" class="form-check-input ml-5" id="{{panel.Id}}" name="{{panel.Name}}" (change)="togglePanelCheck(panel)" [checked]="panel.checked">

<input type="checkbox" class="form-check-input ml-5" id="{{test.Id}}" name="{{test.Name}}" [checked]="test.checked" (change)="toggleCheck(test)">

切换检查代码：

togglePanelCheck(panel){
   if(panel.checked){
     this.uncheckPanel(panel);
   } else {
     this.checkPanel(panel);
   }
}

checkPanel(panel){
  this.checkItem(panel);

  if(this.panelHasTests()){
    panel.tests.foreach(test => {
      this.checkItem(test);
    });
  }
}

uncheckPanel(){
  this.uncheckItem(panel);

  if(this.panelHasTests()){
    panel.tests.foreach(test => {
      this.uncheckItem(test);
    });
  }
}

toggleCheck(item){
  if(item.checked){
    this.uncheckItem(item);
  } else { 
    this.checkItem(item);
  }
}

checkItem(item){
  this.selectedCheckboxes.push(item.id);
  item.checked = true;
}

uncheckItem(item){
  const index = this.selectedCheckBoxes.indexOf(item.id);
  this.selectedCheckBoxes.splice(index, 1);
  item.checked = false;
}

private panelHasTests(panel) : boolean {
 return panel.tests && panel.tests.length != 0;
}

Answer 2

尝试如下修改您的checkItem()

checkItem(panel: any) {
  panel.isChecked = !panel.isChecked;
  panel.Tests.forEach(e => {
    e.isChecked = true;
  });
}

完成后，您的panels对象将容纳所有复选框的雕像。

根据Id angular 4选中所有复选框

2 个答案: