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

Question

我在我的 Angular 5 项目中使用了 mat-table。 table 由各种数据和删除选项组成。删除数据后，它不会从 table 中消失，除非重新加载页面。我在一个包中使用的另一个数据 table 中使用了 splice，它工作正常，但在 mat-table 中无法完成。

我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

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

constructor(private cdr:ChangeDetectionRef)

和

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

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

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

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 4

请准确重现这些步骤。

-> 步骤#1

dataSource: any = new MatTableDataSource()

-> 步骤#2 在索引处拼接

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

-> 步骤#3 然后更新视图

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

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

"Property '_data' is private and only accessible within class 'MatTableDataSource"

不要忘记任何数据源：

step#1 'dataSource : any'

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

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

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

How to splice data in Angular 5 mat-table?

angular

angular-material

angular5

angular-material-5