如何在 Angular 5 mat-table 中拼接数据？

Question

我在 Angular 5 项目中使用了 mat-table。该表由各种数据和删除选项组成。当数据被删除时，它不会从表中消失，除非重新加载页面。我在另一个包中使用的数据表中使用了splice，它工作得很好，但在mat-table 中却做不到。

我的桌子视图：

<h5>User List </h5>
<div class="example-container mat-elevation-z8">
    <div class="example-header">
        <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" matInput placeholder="Filter">
        </mat-form-field>
    </div>

    <mat-table #table [dataSource]="dataSource" matSort>

        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef mat-sort-header> User ID</mat-header-cell>
            <mat-cell *matCellDef="let item">
                {{item.id}}
                <span (click)="editUserData(item)"> edit </span>
                <span (click)="viewUserData(item)"> view </span>
                <span (click)="confirmDelete(item)"> delete </span>
            </mat-cell>
        </ng-container>

        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Name</mat-header-cell>
            <mat-cell *matCellDef="let item"> {{item.full_name}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="phone">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Mobile / Phone</mat-header-cell>
            <mat-cell *matCellDef="let item"> {{item.mobile}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="email">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Email</mat-header-cell>
            <mat-cell *matCellDef="let item"> {{item.email}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="organization">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Organization</mat-header-cell>
            <mat-cell *matCellDef="let item"> {{item.organization}}</mat-cell>
        </ng-container>

        <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef mat-sort-header> status</mat-header-cell>
            <mat-cell *matCellDef="let item"> {{item.status}}</mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
    <mat-paginator #paginator
                   [pageSize]="10"
                   [pageSizeOptions]="[5, 10, 20]"
                   [showFirstLastButtons]="true">
    </mat-paginator>
</div>
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="425"></p-confirmDialog>

我设置数据源的组件的 ngOnit 部分：

ngOnInit()
{

    this.appService.getUserDataList().subscribe(res => {
        this.employeeTemp = res;
        console.log('THIS IS AGAIN ME', this.employeeTemp);
        this.dataSource = new MatTableDataSource(this.employeeTemp);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;

    });

}

我的confirmDelete 功能：

confirmDelete(item)
{
    this.confirmationService.confirm({
        message: 'Are you sure you want to delete this Employee?',
        header: 'Confirmation',
        accept: () => {
            this.appService.deleteUser(item.id).subscribe(res => {
                    // Splice Or something so the page doesnt reload but the data gets removed from the view.
                    const index = this.dataSource.indexOf(item);
                    this.dataSource.splice(index, 1);
                    this.flashMsg.flashMsg('success', 'Deleted', 'User has been deleted.'); //  this.EmployeeListComponent();
                },
                err => {
                    this.flashMsg.flashMsg('error', 'Error', 'User has not been deleted.');
                });
        },
        reject: () => {
        },
    });
}

confirmDelete函数的item中存储的值：

address :" "
email:"asd@asdasd.asdasd"
full_name:"asdf asdf"
id:"asdadasd@asdasd.asdasd"
mobile:"12345678"
organization:"VURUNG TECH"
status:"Active"
updated_at:"2018-06-20T05:15:52.000Z

我得到了成功flashMessage 显示，但拼接不起作用。

Answer 1

尝试重置datasource 或将data 的datasource 更新为：

confirmDelete(item) {
    this.confirmationService.confirm({
      ...
      accept: () => {
        this.appService.deleteUser(item.id).subscribe(res => {
            this.employeeTemp = this.employeeTemp.filter(employee => employee.id != item.id)
            this.dataSource = new MatTableDataSource(this.employeeTemp);
            //this.dataSource.data = this.employeeTemp; <=== You can also change only data
            ...
          },
          ...
      }
      ...
    });
}

Answer 2

使用标签引用<mat-table>：<mat-table #table [dataSource]="dataSource">。

获取组件ts内部的引用：

@ViewChild('table') table: MatTable<any>;

在this.dataSource.splice(index, 1);调用之后：

this.table.renderRows();

Answer 3

尝试在模型更改后调用更改检测运行。

constructor(private cdr:ChangeDetectionRef)

和

this.appService.deleteUser(item.id).subscribe(res => {
         ....
         this.cdr.detectChanges();
        ....
      },

Answer 4

请准确重现这些步骤。

-> 步骤#1

dataSource: any = new MatTableDataSource()

-> Step#2 在索引处拼接

this.dataSource.data.splice(currentIndex, 1);

-> Step#3 然后更新视图

 this.dataSource._data.next(this.dataSource.data)

非常重要： 为了避免这个错误

"属性 '_data' 是私有的，只能在类内访问 'MatTableDataSource"

不要忘记任何数据源：

step#1 'dataSource : any'   

-> 步骤 #2 的详细信息（仅供参考）

当我控制台时，我看到有行为 '_data' 数据源的主题属性。所以我更新它，以便视图更新。