角度材料表|在运行时添加删除行

Question

我正在使用由普通数组作为数据源支持的Angular Material Table。

this.employees = this.route.snapshot.data.employes; // of type Employee[] resolved using a Resolve guard
this.dataSource = new MatTableDataSource<Employee>(this.employees);

最初渲染后，我想通过修改＆＃39; this.employess＆＃39;来添加/删除数据表中的行。数组使用我的组件中的方法： -

addEmployee(e: Employee){
 this.employess.push(e);   // I expect the table to have one row added after this.
}

removeEmployee(index : number){
  // splice the array at given index & remove one row from data table
}

问题

当我在数组中添加remove元素时，数据表行不受影响。 我找到了一个blog详细说明相同的问题，但使用了自定义数据源。有没有办法使用普通数组？

Answer 1

最简单的方法是在您已经使用MatTableDataSource的情况下在数据源上调用_updateChangeSubscription（）

  

this.dataSource =新的MatTableDataSource（this.employees）;

您新修改的addEmployee方法将变为：

addEmployee(e: Employee){
 this.employess.push(e);   // I expect the table to have one row added after this.
 this.dataSource._updateChangeSubscription()  // THIS WILL DO
}

Answer 2

问题是angular / Mat-table在实例化之后没有检测到对底层数组的任何修改。因此，如果您选择添加或删除行，则必须明确地使表监听事件或仅刷新表数据。以下是你将如何做到这一点。

addEmployee(e: Employee){
 this.employess.push(e);   // I expect the table to have one row added after this.
 this.dataSource.data = this.employees; // this step will refresh the table
}

您的删除方法也是如此。

希望这有帮助。

Answer 3

您可以创建一个EmployeeDataSource而不是Observable<Employee[]>的课程Employee[]：

import {DataSource} from '@angular/cdk/collections';
import {Observable} from 'rxjs/Observable';

export class EmployeeListDataSource extends DataSource<any> {


    constructor(private _employeeList$: Observable<Employee[]>) {
        super();
    }

    connect(): Observable<Employee[]> {
        return this._employeeList$;
    }

    disconnect() {
    }
}

然后通过传递一个observable来创建数据源：

this.dataSource = new EmployeeListDataSource(yourObservable);

You can find a stackblitz example here.

Answer 4

我不确定这是否是最佳解决方案，但您可以创建一个用于存储数据的主题。现在你可以像博客一样使用它了。

which.nmin <- function(x, n){
    order(x)[seq_len(n)]
}

set.seed(123)
x <- rnorm(100)
which.nmin(x, 6)
# [1] 72 18 26 57 43  8

Answer 5

在最新版本的 Angular Material 7/8

您需要在推送新行数据后调用 .renderRows（）方法

addRowData(row_obj){
   var d = new Date();
   this.dataSource.push({
     id:d.getTime(),
     name:row_obj.name
   });
   this.table.renderRows();
 }

 deleteRowData(row_obj){
    this.dataSource = this.dataSource.filter((value,key)=>{
      return value.id != row_obj.id;
    });
 }

源教程link

Answer 6

我正在使用Angular 9，这是我所做的

this.dataSource.data.push({
      profile:"profile",
      skillRequired:"skillRequired"
    });
this.dataSource.filter = "";

使用过滤器数据表自动更新