Как удалить всю строку таблицы при нажатии флажка этой строки в угловых 7

Question

У меня есть таблица, данные которой поступают из цикла. Здесь, когда вы нажимаете кнопку «Добавить», новая похожая строка будет добавлена ​​в самом низу. Снова при нажатии кнопки «Редактировать» все текстовые поля будут включены (изначально отключены). До сих пор работает нормально. Но когда я отмечаю один или несколько флажков и нажимаю кнопку удаления, все строки, основанные на отмеченном флажке, будут удаляться / удаляться. Снова, когда я нажимаю кнопку удаления без выбора какого-либо флажка, должно отображаться предупреждающее сообщение, а также когда пользователь установил все флажки ипопытался удалить все строки, должно появиться предупреждающее сообщение, что «должна быть хотя бы одна строка», и он не может удалить все строки, если ни одна строка не будет проверена. Я новичок в angular, может кто-нибудь, пожалуйста, помогите мне. Воткод ниже https://stackblitz.com/edit/angular-wscsmy

app.component.html

<div class="container">
    <h2>Basic Table</h2>
    <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
    <div><button (click)="enable()">Edit</button> &nbsp;
    <button (click)="delete()">Delete</button> </div>
    <table class="table border">

        <tbody>
            <tr *ngFor="let row of groups;let i = index" (click)="setClickedRow(i)"  [class.active]="i == selectedRow">
              <td> <input type="checkbox"></td>
                <td> <input #focus [disabled]='toggleButton' type="text" value="{{row.name}}"> </td>
                <td> <input [disabled]='toggleButton' type="text" value="{{row.items}}"> </td>
                <td> <button (click)="addRow(i)">Add</button></td>
            </tr>
        </tbody>
    </table>
</div>

app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectedRow: Number;

  @ViewChild('focus', { static: false }) input: ElementRef;
  public toggleButton: boolean = true;
  ngOnInit() {

  }
  groups = [
    {
      "name": "pencils",
      "items": "red pencil"
    },
    {
      "name": "rubbers",
      "items": "big rubber"
    },
    {
      "name": "rubbers1",
      "items": "big rubber1"
    },
  ];
  addRow(index): void {
    var currentElement = this.groups[index];
    this.groups.splice(index, 0, currentElement);
  }
  enable() {
    this.toggleButton = false
    setTimeout(() => { // this will make the execution after the above boolean has changed
      this.input.nativeElement.focus();
      this.selectedRow = 0;
    }, 0);
  }
  delete(){
    alert('hello');
  }
  setClickedRow(index) {
    this.selectedRow = index;
  }
}

Answer 1

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

Я решил сохранить индексы элементов в массиве помощников и, исходя из этого, удалить из исходного массива.Так что, возможно, что-то вроде этого:

toBeDeleted = [];

// called when button is clicked
delete() {
  if (!this.toBeDeleted.length) {
    alert('Choose at least one!');
  } else if (this.toBeDeleted.length === this.groups.length) {
      alert('You cannot delete all rows')
  } 
  else {
    this.groups = this.groups.filter((currentValue, index, arr) => !this.toBeDeleted.includes(index));
  }
  // reset the array
  this.toBeDeleted = [];
}


remove(event, index) {
  // check if checkbox is checked, if so, push to array, else delete from array
  if (event.target.checked) {
    this.toBeDeleted.push(index)
  } else {
    const idx = this.toBeDeleted.indexOf(index);
    this.toBeDeleted.splice(idx, 1)
  }
}

Затем в вашем шаблоне, когда пользователь нажимает на флажок, вызовите remove() и передайте $event и индекс элемента:

 <td> <input type="checkbox" (click)="remove($event, i)"></td>

STACKBLITZ

Answer 2

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

Шаблон:

<td>
  <input type="checkbox" (click)="toggleSelection($event, i)" [checked]="checkboxes[i]">
</td>

Компонент:

checkboxes: boolean[];

ngOnInit() {
   this.checkboxes = new Array(this.groups.length);
   this.checkboxes.fill(false);
}

toggleSelection(event, i) {
  this.checkboxes[i] = event.target.checked;
}

Кроме того, добавляйте еще одну запись-флажок в массив при каждом добавлении новой строки.

addRow(index): void {
  // Other code.
  this.checkboxes.splice(index, 0, false);
}

Вы можете использовать Array.splice () для удаления элементов из массива.

Array.some () может использоваться, чтобы проверить, выбран ли хотя бы один флажок, и Array.every () может использоваться, чтобы проверить, все лифлажки установлены.

delete() {
  var atleastOneSelected = this.checkboxes.some(checkbox => checkbox === true);
  var allSelected = this.checkboxes.every(checkbox => checkbox === true);

  if (!atleastOneSelected) {
    alert("No rows selected.");
    return;
  }

  if (allSelected) {
    alert("At least one row should be present.");
    return;
  }

  // Iterating in reverse to avoid index conflicts by in-place deletion.
  for (let i = this.checkboxes.length-1; i >= 0; i--) {
    // If selected, then delete that row.
    if (this.checkboxes[i]) {
      this.groups.splice(i, 1);
    }
  }

  // Remove entries from checkboxes array.
  this.checkboxes = this.checkboxes.filter(checkbox => checkbox === false);
}

Демонстрация в реальном времени на StackBlitz: https://stackblitz.com/edit/angular-abhkyk