Question

我想创建一个动态表，它能够添加已经完成的行和列，然后我想从表中删除选定的列。这是我的Stack Blitz Link-> 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 Link-> 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 说明：我们采用了一个具有增量值的变量，表中没有列，因此当用户在表中添加列时，值将增加一并将其存储在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>

Answer 2

我分叉了您的stackblitz来完成这项工作。为了将某些东西绑定到mat-checkbox，我使用了一个对象。所以我像这样扩展了tableOneColumnData：

tableOneColumnData: any[] = [{checked: false, data: '1'}, {checked: false, data: '1'}];

HTML：

<th *ngFor="let column of tableOneColumnData; let i = index">
  <div contenteditable="true">
    <mat-checkbox [checked]="column.checked" (click)="markDelete(i, $event)"></mat-checkbox>
  </div>
</th>

.ts：

markDelete(index, $event) {
    this.tableOneColumnData[index].checked = !this.tableOneColumnData[index].checked
    console.log(index);
}

delete() {
  this.tableOneColumnData = this.tableOneColumnData.filter(c => !c.checked);
}

如果您对tableOneColumnData中的对象感到不满意：您还可以使用单独的数组来存储将哪些cols标记为删除的列。这是从tableOneColumnData批量删除该数组中所有元素的方法：remove all elements contained in another array

Answer 3

您只需要在删除方法中添加拼接方法。试试这个，希望对您有所帮助。谢谢

delete(value, $event) {
 this.checked = !value;     
 this.tableOneColumnData.splice(this.tableOneColumnData[this.tableOneColumnData.length - 1], 1);
}

当您单击remove column时，我只是创建一个工作示例，它将从列表中删除最后一列。

工作示例： https://stackblitz.com/edit/delete-selected-column-fbcnet

如何从表格中删除选定的列？角度？

3 个答案: