如何在Angular 7中删除该行的单击复选框中的表格的整个行 [英] How to delete entire row of the table on click checkbox of that row in angular 7

问题描述

我有一个表的数据来自循环.在这里，当您按下添加按钮时，新的类似行将被添加在底部.再次当您按下编辑按钮时，所有文本框将被启用(最初禁用).但是，当我选中单个复选框或多个复选框并按Delete按钮时，所有基于选中复选框的行都将被删除/删除.同样，当我单击Delete按钮而不选择任何复选框时，警告消息也应显示，并且当用户选中所有复选框时，试图删除所有行，警告消息应该在那儿，``至少应该有一行''，除非取消选中任何一行，否则他不能删除所有行. https://stackblitz.com/edit/angular-wscsmy

I have a table whose data is coming from loop.Here when you press add button new similar row will be added at just bottom.Again when you press edit button all textbox will be enable(initially disable).Till now working fine.But when I check single checkbox or multiple checkbox and press delete button all the row based on checked checkbox will be delete/remove.Again when I click delete button without selecting any checkbox alert message should display and also when user selected all check boxes and tried to delete all the row an alert message should be there that 'at least one row should be there' and he cannot delete all rows unless any one row will be unchecked.I am new to angular can anyone please help me.Here is the code below https://stackblitz.com/edit/angular-wscsmy

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

推荐答案

您必须创建一个数组来跟踪每个复选框的状态.并在每次选中或取消选中复选框时进行更新.

You have to create an array to keep track of the state of each checkbox. And update it every time a checkbox is checked or unchecked.

模板:

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

此外，每当添加新行时，将另一个复选框条目添加到数组.

Also, add another checkbox entry to the array whenever a new row is added.

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

您可以使用 Array.splice( )从数组中删除元素.

You can use Array.splice() to delete elements from an array.

Array.some()可用于检查是否至少选中了一个复选框，并且 Array.every()可用于检查是否已选中所有复选框.

Array.some() can be used to check if at least one checkbox is selected, and Array.every() can be used to check if all the checkboxes are selected.

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

Live demo on StackBlitz: https://stackblitz.com/edit/angular-abhkyk

这篇关于如何在Angular 7中删除该行的单击复选框中的表格的整个行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！