Javascript 取消选中复选框将从前端删除整行

我有一个来自后端的面板阵列，它有另一个阵列测试。我用复选框将它们映射到我的定制手风琴上。我面临的问题是，我应该能够选择/取消选择测试，而无需将其从前端移除，就像取消选择时它消失一样。我如何解决这个问题

你可以从那张照片上看到

这是我的html文件

<ngb-panel *ngFor="let panel of panels" id="{{panel.Id}}" [title]="panel.Name">
    <label class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" [name]="panel.Id + '-' + panel.Moniker" [ngModel]="checkAllTestsSelected(panel)" (ngModelChange)="onPanelCheckboxUpdate($event, panel)" [id]="panel.Id + '-' + panel.Moniker">
        <span class="custom-control-indicator"></span>
    </label>

    </ng-template>
    <ng-template ngbPanelContent>
        <div class="individual-panel" *ngFor="let test of panel.Tests">
            <span class="text-dimmed">{{test.Name}}</span>
            <span *ngIf="panel.Name.includes('ENA') || panel.Name.includes('Celiac')">
                <label class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" [name]="test.Id + '-' + test.Code"
                    [ngModel]="testSelectionSession.SelectedPanelIds.indexOf(panel.Id) > -1 || testSelectionSession.SelectedPanelIds.indexOf(test.AssociatedPanel?.Id) > -1"
                    (ngModelChange)="onTestCheckboxUpdate($event, test, panel)" 
                    [id]="test.Id + '-' + test.Code">
                    <span class="custom-control-indicator"></span>
                </label>
            </span>
        </div>

checkAllTestsSelected(panel: TestOrderPanel) {
    // get all individual test panels
    let individualTestPanelIds = panel.Tests.reduce((acc, test) => {
        if (test.AssociatedPanel) {
            acc.push(test.AssociatedPanel.Id);
        }
        return acc;
    }, []);

    // check if all individual test panels are selected

    let allIndividualTestsSelected = individualTestPanelIds.reduce(
        (acc: boolean, panelId: number) =>
        acc && this.panelIds.indexOf(panelId) > -1,
        individualTestPanelIds.length > 0 &&
        panel.Tests.length === individualTestPanelIds.length
    );

    // if selected, remove all individual test panels and add the panel group
    if (panel.Tests.length > 0 && allIndividualTestsSelected) {
        this.panelIds = this.panelIds.filter(
            panelId => individualTestPanelIds.indexOf(panelId) === -1
        );
        this.selectedPanels = this.selectedPanels.filter(
            selectedPanel => individualTestPanelIds.indexOf(selectedPanel.Id) === -1
        );
        this.panelIds.push(panel.Id);
        this.selectedPanels.push(panel);
        this.updateSession();
    }
    return this.panelIds.indexOf(panel.Id) > -1;
}


onPanelCheckboxUpdate($event: boolean, panel: TestOrderPanel) {
    let testPanelIds = panel.Tests.reduce((acc, test) => {
        if (test.AssociatedPanel) {
            acc.push(test.AssociatedPanel.Id);
        }

        return acc;
    }, []);

    // Wipe any duplicates
    this.panelIds = this.panelIds.filter(
        panelId => panel.Id !== panelId && testPanelIds.indexOf(panelId) === -1
    );
    this.selectedPanels = this.selectedPanels.filter(
        selectedPanel =>
        panel.Id !== selectedPanel.Id &&
        testPanelIds.indexOf(selectedPanel.Id) === -1
    );

    if ($event) {
        this.panelIds.push(panel.Id);
        this.selectedPanels.push(panel);
    }
    this.updateSession();
}

onTestCheckboxUpdate($event: boolean,
    test: TestOrderPanelTest,
    panel: TestOrderPanel,
    index) {

    let testPanelIds = panel.Tests.reduce((acc, test) => {
        if (test.AssociatedPanel) {
            acc.push(test.AssociatedPanel.Id);
        }

        return acc;
    }, []);
    let associatedTestPanels =
        this.testSelectionSession.IndividualTestPanelsForAll.filter(
            testPanel => testPanelIds.indexOf(testPanel.Id) > -1
        );
    // If the panel is selected and a test within the panel is deselected,
    // remove the panel and back all of the individual tests
    if (this.panelIds.indexOf(panel.Id) > -1 && !$event) {
        this.selectedPanels = this.selectedPanels.filter(
            e => e.Tests.splice(index, 1)
        );
    }

    let clickedTestPanel = associatedTestPanels.find(
        testPanel => (test.AssociatedPanel ? test.AssociatedPanel.Id : -1) ===
        testPanel.Id
    );

    if (clickedTestPanel) {
        // Wipe any duplicates
        this.panelIds = this.panelIds.filter(
            panelId => clickedTestPanel.Id !== panelId
        );
        this.selectedPanels = this.selectedPanels.filter(
            panel => clickedTestPanel.Id !== panel.Id
        );

        // Add individual panel if checkbox selected
        if ($event) {
            this.panelIds = this.panelIds.concat(clickedTestPanel.Id);
            this.selectedPanels = this.selectedPanels.concat(clickedTestPanel);
        }
    }
    this.updateSession();
}

this.panelIds包括面板的ID，this.selectedPanels包括选定的整个面板阵列

我也创造了一场闪电战

我的代码执行类似stackblitz.com/edit/angular-bsszc9的操作

下面是我的页面的示例

我怎样才能解决这个问题？ 谢谢

删除

if (this.panelIds.indexOf(panel.Id) > -1 && !$event) {
    this.selectedPanels = this.selectedPanels.filter(
        e => e.Tests.splice(index, 1)
    );
}

此部分除了以非常随机的方式删除复选框和面板之外，没有任何逻辑原因（从每个面板中删除具有相同索引的复选框，如果没有任何索引，则删除整个面板）

请阅读：并了解这是如何发生的

删除

if (this.panelIds.indexOf(panel.Id) > -1 && !$event) {
    this.selectedPanels = this.selectedPanels.filter(
        e => e.Tests.splice(index, 1)
    );
}

此部分除了以非常随机的方式删除复选框和面板之外，没有任何逻辑原因（从每个面板中删除具有相同索引的复选框，如果没有任何索引，则删除整个面板）

---

请阅读：并了解这是如何发生的

如何解决此问题如果我移除此块问题是由此块引起的，移除它将解决此问题！我做到了。我想取消选择单个测试，以便将其从阵列中删除。我的这段代码是从前端删除整行如何解决这个问题，那么如果我删除这个块问题是由这个块引起的，删除它将解决这个问题！我做到了。我想取消选择单个测试，以便将其从阵列中删除。我的代码是从前端删除整行