Как удалить элемент массива при снятии флажка (угловой 4) - PullRequest
Новая
       23

Как удалить элемент массива при снятии флажка (угловой 4)

0 голосов
/ 25 мая 2019

У меня есть этот массив объектов.В каждом объекте есть другой массив. 

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, а также из длины.

Может ли кто-нибудь помочь мне в этом отношении?

Я также создал стек стека:

Стек стека

Ответы [ 4 ]

0 голосов
/ 25 мая 2019

Прежде всего, вам нужно добавить дополнительный атрибут к вашим 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 здесь

Надеюсь, это поведение, которого вы хотите достичь.

0 голосов
/ 25 мая 2019

Я создал короткую демонстрацию Stackblitz ЗДЕСЬ

Он управляет переключением дочерних флажков с помощью parent, и каждый флажок имеет параметр checked для отслеживания того, какой из них выбран.

Это облегчит вам поддержание состояния каждого флажка, а не манипулирует каждым изменением.

0 голосов
/ 25 мая 2019

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-контейнер, потому что вы не можете использовать *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;
}

В заключение отметим, что этот ответ покажет вам эту простую технику. Вы, очевидно, хотите провести рефакторинг в меньшие классы / модули и сделать это более удобным для обслуживания. Надеюсь, это поможет;).

0 голосов
/ 25 мая 2019

Вы можете попробовать вот так. 

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

Надеюсь, это поможет вам.

...