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"
    }
  ]
}],

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

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

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

我可以做，但是主要的事情是，当我取消选择“测试”复选框之一时，应该将其从selectedPanel中删除，并且将其长度也删除。

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

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

Stackblitz

Answer 1

您可以尝试这样。

<ngb-accordion #acc="ngbAccordion">
  <ngb-panel *ngFor="let panel of panels; let i = index" id="{{panel.Id}}" [title]="panel.Name">
     <ng-template ngbPanelTitle>
        <span class="panel-length"><strong>{{panel.Tests.length}}</strong></span>

            <input type="checkbox" class="form-check-input ml-5" id="{{panel.Id}}" name="{{panel.Name}}">


      </ng-template>
    <ng-template ngbPanelContent>
    <div class="individual-panel" *ngFor="let test of panel.Tests, let j = index;">
          <span class="text-dimmed">{{test.Name}}</span>
            <input type="checkbox" class="form-check-input ml-5" id="{{test.Id}}" name="{{test.Name}}" (click)="checkItem(i, j)">  
        </div>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

   <!-- <span class="panel-length"><strong>{{panels.Tests.length}}</strong></span> -->

TS

checkItem(i, j){
   this.panels[i].Tests.splice(j, 1);
   console.log(this.panels[i].Tests);
  }

希望它能对您有所帮助。

Answer 2

我创建了一个简短的Stackblitz演示HERE

它使用父级控制子级复选框的切换，每个复选框都有一个checked参数来跟踪选择了哪个。

这将使您更容易维护每个复选框的状态，而不是对每个更改进行操作。

Answer 3

Stackblitz：https://stackblitz.com/edit/angular-bsszc9?file=src/app/app.component.ts

请注意，以下代码是您可以使用的技术的快速示例。

我为测试提供了isShown属性。注意：您应该将这些测试重构为带有单独模块的对象。

panels = [{
  CategoryId: "31b7a227-9fda-4d14-8e1f-1dee5beeccb4",
  Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd",
  Name: "Celiac test",
  Tests: [
  {Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 1 (DGP) IgG", 
   isShown: true },
  {
   Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 2 (DGP) IgG", 
   isShown: true },
  {
   Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781",
   Name: "test 3 (DGP) IgG", 
   isShown: true}
]
},
{
  CategoryId: "31b7a227-9fda-4d14-8e1f-1dee5beeccb4",
  Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd",
  Name: "Comprehensive 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"}
]
}]

单击输入框时，将触发单击事件，并将test.isShown属性设置为false。 *ngIf将在显示的代码中隐藏测试。（请注意，我引入了一个新的ng-container，因为您不能在同一容器上使用*ngFor和*ngIf。）

<ng-container *ngFor="let test of panel.Tests">
  <div class="individual-panel" *ngIf='test.isShown'>
    <span class="text-dimmed">{{test.Name}}</span>
    <input type="checkbox" class="form-check-input ml-5" id="{{test.Id}}" name="{{test.Name}}" (click)="hide( test )" >   
  </div>
</ng-container>

以下是单击事件触发的方法。或者，您可以从阵列中删除test（这会使计数器工作，但是擦除数据可能不是一个好主意）；

hide( test ) {
  test.isShown = false;
}

最后，这个答案是向您展示这种简单的技术。您显然希望在较小的类/模块中进行重构，并使其更易于维护。希望对您有所帮助；）。

Answer 4

首先，您需要为panels和Tests添加一个额外的属性，以存储复选框的状态。您的panels数组如下：

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

第二，您需要检查复选框的值，以决定是否要将特定测试保留在selectedPanel中。

我假设您的panels和Tests具有唯一的ID属性

您可以找到 stackblitz https://www.kaggle.com/codhek/cnn-using-keras-using-csv-accuracy-99-82

的更新版本

我希望这是您想要实现的行为。

取消选中复选框时如何删除数组的项（角度4）

4 个答案: