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

我想创建一个动态表，它可以添加我已经添加的行和列，然后我想从表中删除所选列。 这是我的堆栈闪电战链接--> 如何使用复选框删除列，如果我选中了5个复选框，则应删除5列

HTML文件

测试
测试2
添加列
添加行
删除列

我花了你的钱来做这件事。为了将一些东西绑定到mat复选框，我使用了一个对象。所以我扩展了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>

---

如果您不满意我在tableOneColumnData中使用对象：您还可以使用单独的数组来存储标记为删除的列。以下是如何从tableOneColumnData批量删除该数组中的所有元素：

您只需要在delete方法中添加splice方法。试试这个，我希望它能帮你。谢谢

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

我只是创建了一个工作示例，当您单击

remove column

时，它将从列表中删除最后一列

工作示例：

请检查以下代码： 说明：我们使用了一个具有增量值的变量，表中没有列，因此当用户在表中添加列时，值将增加1，并存储在tableOneColumnData数组中。 之后，当用户单击表列的复选框时，我们将首先检查，如果选中，则我们将在名为removeItems的新数组中添加特定索引编号的tableOneColumnData，以删除列；如果未选中复选框，则我们将从removeItems数组中删除该编号。 之后，当用户最后单击remove columns按钮时，我们将循环removeItems数组，并在tableOneColumnData数组中找到该数字的索引（如果存在），然后将该索引从tableOneColumnData数组中拼接

从'@angular/core'导入{Component，OnInit}；
从“@angular/material”导入{MatTableDataSource}；
/**
*@title的基本用法``
*/
@组成部分({
选择器：“表基本示例”，
样式URL:['table-basic-example.css']，
templateUrl:'table basic example.html'，
})
导出类TableBasicExample实现OnInit{
tableOneColumnData:any=[0,1]；
tableOneRowData:any=['1'，'1']；
panelOpenState:boolean=false；
选中：布尔=假；
最后一个编号：编号=2；
removeItems:any=[]；
addColumnForTableOne（）{
这是最后一个数字++；
this.tableOneColumnData.push（此.last_编号）；
console.log（this.tableOneColumnData）；
}
addRowForTableOne（）{
console.log（）；
这个.tableOneRowData.push（'1'）；
console.log（this.tableOneRowData）；
}
删除（事件、索引）{
如果（已选中事件）{
this.removietems.push（this.tableOneColumnData[index]）；
log（索引，this.tableOneColumnData[index]，this.removietems）；
}
否则{
var ind=this.removitems.indexOf（this.tableOneColumnData[index]）；
如果（ind>=0）{
这个。移除项目。拼接（ind，1）；
}
}
log（索引，this.tableOneColumnData[index]，this.removietems）；
}
removeAllCol（）{
如果（this.removietems.length>0）{
对于（变量i=0；i=0）{
这个.tableOneColumnData.splice（ind，1）；
}
}
this.removietems=[]；
}
}
ngOnInit（）{}
}

测试
测试2
添加列
添加行
删除列

是，但我想从表中删除选定的列，而不是列表中的最后一列。你知道吗？要从tableOk中删除所选列，请更新代码。如果用户选中了多个复选框，我有一个问题

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