Angular 如何从没有过滤器的角度材质表中删除特定行？

我的samplepage.component.ts

从'@angular/core'导入{Component}；
@组成部分({
选择器：“应用程序batchticketvalidation”，
templateUrl:'./batchticketvalidation.component.html'，
样式URL:['./batchticketvalidation.component.css']
})
导出类BatchticketvalidationComponent{
构造函数（）{}
displayedColumns=['id'，'ticketnumb'，'actionsColumn']；
数据源：PeriodiceElement[]=元素_数据；
私有myDataArray：任意；
删除票证（rowid:number）{
如果（rowid>-1）{
this.myDataArray.splice（rowid，1）；
}
}
}
导出接口周期元素{
id：编号；
ticketnumb：字符串；
行动专栏：任何；
}
常量元素_数据：PeriodiceElement[]=[
];

My samplepage.component.html

身份证件
{{i+1}}
车票号码
{{element.ticketnumb}
行动
去除

我是个新手。我需要从表中删除特定行的帮助，删除该行后，表应该得到刷新或显示现有数据。我只有静态行。这只是一个简单的html模型，我想展示给客户端

每一行都有删除按钮，点击删除按钮我就调用deleteTicket（rowid）

当触发deleteTicket方法时，该行不会从Ui中删除，但当我控制台this.myDataArray时，数据会从对象中删除

---

我尝试了所有的可能性。

我建议使用

MatTableDataSource

dataSource: MatTableDataSource = new MatTableDataSource<T>(ELEMENT_DATA);

deleteFunction(item){
    // find item and remove ist
    dataSource.data.splice(this.dataSource.data.indexOf(item.id), 1);
}

dataSource:MatTableDataSource=新的MatTableDataSource（元素数据）；
删除函数（项）{
//查找项目并删除它
dataSource.data.splice（this.dataSource.data.indexOf（item.id），1）；
}

删除所选行后，必须重新分配matDataTable

deleteTicket(rowid: number){
  // raw_data is the array of data that you getting from the db.
  this.raw_data.splice(rowid,0)
  this.dataSource = new MatTableDataSource(this.users);   
}

在通过项的索引执行

splice（）

之后，您应该更新数据源

const index = this.dataSource.data.indexOf(item.id);
this.dataSource.data.splice(index, 1);
this.dataSource._updateChangeSubscription(); // <-- Refresh the datasource

const index=this.dataSource.data.indexOf（item.id）；
this.dataSource.data.splice（索引，1）；
此.dataSource._updateChangeSubscription（）；// 下面的代码适合我

removeData(i){
 this.count.splice(i,1);
 this.dataSource = new MatTableDataSource(this.count);
}

问题在于，不变性在游戏中：初始化后的mat表只侦听数据源引用



因此，数据源引用应该在更改其内容后以某种方式进行更新，例如

deleteTicket（rowid:number）{
如果（rowid>-1）{
this.myDataArray.splice（rowid，1）；
this.myDataArray=[…this.myDataArray]；//新建ref！
}
}

或者更简单

deleteTicket（rowid:number）{
this.myDataArray=this.myDataArray.filter（（项，索引）=>index！==rowid）；
}
您可以尝试-this.changeDetectorRefs.detectChanges（）@rakesh提供新的
this.myDataArray
作为新的数据源对象。您可以使用this.myDataArray=newMattableDataSource（this.myDataArray）

拼接后，ArrayOp仅返回元素中的最后一项？您应该使用

this.dataSource.data.splice（index，1）

否则

splice

方法将删除索引更高或相等的所有项，然后

item

像一个符咒一样工作，但需要特别注意的是：如果您对材质表使用分页器或排序，请记住更新它们。（例如，

this.dataSource.paginator=this.paginator；this.dataSource.sort=this.sort；

）