html - 如何从表格中删除选定的列？Angular？
我想创建一个动态表格，它能够添加行和列，我已经完成了这部分，然后我想从表格中删除选定的列。 这是我的 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
</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列。
答案＃1
请检查以下代码： https://stackblitz.com/edit/delete-selected-column-t7ecei?file=app/table-basic-example.html 说明：我们创建了一个变量，其值会根据表格中的列数递增，因此当用户在表格中添加列时，该值会增加1，并存储在 tableOneColumnData 数组中。之后，当用户点击表格列的复选框时，我们会先检查是否被选中，如果选中，则会将 tableOneColumnData 中对应索引的值添加到名为 removeItems 的新数组中，以便删除列；如果复选框未选中，则会从 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
</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>答案＃2
你只需要在你的删除方法中添加 splice 方法。试试这个，我希望它能帮到你。谢谢
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