html - 如何从表中删除选定的列？ Angular ？

Question

我想创建一个动态表，它可以添加我已经完成的行和列，然后我想从表中删除选定的列。这是我的 Stack Blitz 链接 --> https://stackblitz.com/edit/delete-selected-column如何使用复选框删除列，如果我选择了 5 个复选框，则应删除 5 列。

HTML 文件

<div class="main-content">
                    <mat-accordion>
                    <!-- Expansion Pannel One Starts Here -->
                    <mat-expansion-panel>
                        <mat-expansion-panel-header>
                            <mat-panel-title>
                                test
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </mat-panel-title>
                            <mat-panel-description>
                                Test 2
                            </mat-panel-description>
                        </mat-expansion-panel-header>
                        <!-- Table One Data Starts Here -->
                        <table id="tableOne" class="table-style">
                            <tr>
                                <th *ngFor="let column of tableOneColumnData">
                                    <div contenteditable="true">
                                        <mat-checkbox
                                            value="checked"
                                            (click)="delete(checked, $event)"
                                        ></mat-checkbox>
                                    </div>
                                </th>
                            </tr>
                            <tr *ngFor="let column of tableOneRowData">
                                <td *ngFor="let column of tableOneColumnData">
                                    <div contenteditable="true"></div>
                                </td>
                            </tr>
                        </table>

                        <!-- Table Two Data Ends Here -->
                        <button
                            style="margin: 5px;"
                            mat-button
                            mat-raised-button
                            color="primary"
                            (click)="addColumnForTableOne()"
                        >
                            Add Column
                        </button>
                        <button
                            style="margin: 5px;"
                            mat-button
                            mat-raised-button
                            color="primary"
                            (click)="addRowForTableOne()"
                        >
                            Add Row
                        </button>
                        <button
                            style="margin: 5px;"
                            mat-button
                            mat-raised-button
                            color="warn"
                        >
                            Remove Column
                        </button>
                  
                    </mat-expansion-panel>                                 
                </mat-accordion>

   </div>

TS 文件

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';



/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample implements OnInit {
tableOneColumnData: any = ['1', '1'];
    tableOneRowData: any = ['1', '1'];
 panelOpenState: boolean = false;
 checked :boolean = false;

   addColumnForTableOne() {
        this.tableOneColumnData.push('1');
        console.log(this.tableOneColumnData);
    }
    addRowForTableOne() {
        console.log();
        this.tableOneRowData.push('1');
        console.log(this.tableOneRowData);
    }

    delete(value, $event) {
        this.checked = !value;
        console.log(this.checked);
    }
    ngOnInit() {}
}

我想创建一个动态表，它可以添加我已经完成的行和列，然后我想从表中删除选定的列。这是我的 Stack Blitz 链接 --> https://stackblitz.com/edit/delete-selected-column如何使用复选框删除列，如果我选择了 5 个复选框，则应删除 5 列。

Answer 1

请检查以下代码: https://stackblitz.com/edit/delete-selected-column-t7ecei?file=app/table-basic-example.html说明 :我们采用了一个具有增量值且表中没有列的变量，因此当用户在表中添加列时，值将增加 1，并将存储在 tableOneColumnData 数组中。之后，当用户单击表列的复选框时，我们将首先检查，如果它被选中，那么我们将在名为 removeItems 的新数组中添加 tableOneColumnData 的特定索引编号以删除列，或者如果复选框未选中，那么我们将删除该编号来自 removeItems 数组。之后，当最终用户单击删除列按钮时，我们将循环 removeItems 数组并在 tableOneColumnData 数组中找到该数字的索引(如果存在)然后将从 tableOneColumnData 数组中拼接该索引。

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';



/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample implements OnInit {
tableOneColumnData: any = [0,1];
    tableOneRowData: any = ['1', '1'];
 panelOpenState: boolean = false;
 checked :boolean = false;
 last_number : number = 2;
 removeItems : any = [];

   addColumnForTableOne() {
        this.last_number++;
        this.tableOneColumnData.push(this.last_number);
        console.log(this.tableOneColumnData);
    }
    addRowForTableOne() {
        console.log();
        this.tableOneRowData.push('1');
        console.log(this.tableOneRowData);
    }

    delete(event,index) {
      if(event.checked){
        this.removeItems.push(this.tableOneColumnData[index]);
        console.log(index,this.tableOneColumnData[index],this.removeItems);
      }
      else{
        var ind = this.removeItems.indexOf(this.tableOneColumnData[index]);
          if(ind >= 0){
            this.removeItems.splice(ind,1);
          }
      }
      console.log(index,this.tableOneColumnData[index],this.removeItems);
    }

    removeAllCol(){
      if(this.removeItems.length > 0){
        for(var i=0;i<=(this.removeItems.length - 1);i++){
          var ind = this.tableOneColumnData.indexOf((this.removeItems[i]));
          if(ind >= 0){
            this.tableOneColumnData.splice(ind,1);
          }
        }
        this.removeItems = [];
      }
    }
    ngOnInit() {}
}



   

<div class="main-content">
                    <mat-accordion>
                    <!-- Expansion Pannel One Starts Here -->
                    <mat-expansion-panel>
                        <mat-expansion-panel-header>
                            <mat-panel-title>
                                test
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </mat-panel-title>
                            <mat-panel-description>
                                Test 2
                            </mat-panel-description>
                        </mat-expansion-panel-header>
                        <!-- Table One Data Starts Here -->
                        <table id="tableOne" class="table-style">
                            <tr>
                                <th *ngFor="let column of tableOneColumnData;let index = index;">
                                    <div contenteditable="true">
                                        <mat-checkbox
                                            (change)="delete($event,index)"
                                        ></mat-checkbox>
                                    </div>
                                </th>
                            </tr>
                            <tr *ngFor="let column of tableOneRowData">
                                <td *ngFor="let column of tableOneColumnData">
                                    <div contenteditable="true"></div>
                                </td>
                            </tr>
                        </table>

                        <!-- Table Two Data Ends Here -->
                        <button
                            style="margin: 5px;"
                            mat-button
                            mat-raised-button
                            color="primary"
                            (click)="addColumnForTableOne()"
                        >
                            Add Column
                        </button>
                        <button
                            style="margin: 5px;"
                            mat-button
                            mat-raised-button
                            color="primary"
                            (click)="addRowForTableOne()"
                        >
                            Add Row
                        </button>
                        <button
                            style="margin: 5px;"
                            mat-button
                            mat-raised-button
                            color="warn"
                            (click)="removeAllCol()"
                        >
                            Remove Column
                        </button>
                  
                    </mat-expansion-panel>                                 
                </mat-accordion>

   </div>