如何删除数组中的对象 角度 4

Question

嘿，我有一个来自后端的数组，我在其中映射并添加了复选框，如下图所示 -

是有 json 对象，它有一个数组选定的测试对象是哪个被选中面板

(2) [{…}, {…}]
0:
CategoryId: "31b7a227-9fda-4d14-8e1f-1dee5beeccb4"
Code: "GMA0300"
Description: "PA-5215: Renamed"
Enabled: true
Favorite: false
Id: "26cfdb68-ef69-4df0-b4dc-5b9c6501b0dd"
InstrumentType: null
Moniker: "1GMA0300"
Name: "Celiac Disease Panel (tTG IgG, tTG IgA, DGP IgG)"
Tests: Array(4)
 0: {Id: "daa9a494-f932-40cd-8c40-192716c8234c", Code: "GMA0303", Name: 
 "Deamidated Gliadin Peptide (DGP) IgA"}
 1: {Id: "e2bb4607-c227-4483-a3e9-55c1bc5a6781", Code: "GMA0304", Name: 
 "Deamidated Gliadin Peptide (DGP) IgG"}
 2: {Id: "2fcd610f-d453-4c4f-a8dc-1a5f50e88548", Code: "GMA0301", Name: 
 "Tissue Transglutaminase (tTG) IgA"}
 3: {Id: "de41b236-4866-419a-a6f4-5f7c1440d30f", Code: "GMA0302", Name: 
 "Tissue Transglutaminase (tTG) IgG"}
 length: 4
 TestsSelectable: false
 __proto__: Object
1:
CategoryId: "31b7a227-9fda-4d14-8e1f-1dee5beeccb4"
Code: "GGA1000"
Description: "PA-5459: Added"
Enabled: true
Favorite: true
Id: "05932085-a65d-44cc-894e-d8925cec4ea9"
InstrumentType: null
Moniker: "1GGA1000"
Name: "Celiac Disease Panel (tTG IgG, tTG IgA, DGP IgG) - Confirmatory"
Tests: (3) [{…}, {…}, {…}]
TestsSelectable: false

并且在左侧面板中显示考试数量，即7，我想要的是当我取消选择考试数量时，它应该从数组中删除，计数应该减少，就像如果取消选择2测试长度应该在左侧面板中为5一样，我尝试了删除函数，但它删除了整行

我的html文件

    <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>
    </div>
  </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>
  </ng-template>

ts文件

    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) {


    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
    );

    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);
        console.log(this.panelIds)
        this.selectedPanels = this.selectedPanels.concat(clickedTestPanel);
        console.log(this.selectedPanels)
      }
    }
    this.updateSession();
  }

如果有人知道如何在取消选择时删除测试长度，我将不胜感激

Answer 1

您必须提取之后可能要删除的索引

var array = [2, 5, 9];
console.log(array);
var index = array.indexOf(5);
if (index > -1) {
 array.splice(index, 1);
}

Answer 2

不明白你需要什么。但总的来说。

如果要删除对象中的字段。您可以使用

var a = {
   field1: 'abc'
}

delete a['field1'];

带阵列

Array.splice
// or
Array.filter // Get only what you need depends on your condition

Answer 3

查看此主题。

我的回答来自那里：

let updatedArray = [];
for (let el of this.oldArray) {
    if (el !== elementToRemove) {
        updated.push(el);
    }
}
this.oldArray = updated;