2

我mat-table在我的 Angular 5 项目中使用过。该表由各种数据和删除选项组成。当数据被删除时，除非重新加载页面，否则它不会从表中消失。我曾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: () => {
        },
    });
}

函数中存储的item值confirmDelete：

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显示成功，但拼接不起作用。

4

4 回答 4

3

尝试通过重置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
            ...
          },
          ...
      }
      ...
    });
}
于 2018-06-21T05:26:05.750 回答
1

参考<mat-table>使用主题标签：<mat-table #table [dataSource]="dataSource">。

获取组件 ts 内部的引用：

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

通话后this.dataSource.splice(index, 1);：

this.table.renderRows();
于 2018-06-21T05:20:06.010 回答
0

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

constructor(private cdr:ChangeDetectionRef)

和

this.appService.deleteUser(item.id).subscribe(res => {
         ....
         this.cdr.detectChanges();
        ....
      },
于 2018-06-21T05:08:10.490 回答
0

请准确重现这些步骤。

-> 步骤#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'dataSource 的行为主题属性。所以我更新它，以便视图更新。 当我控制台时，我看到 dataSouce 的行为（'_data'）主题属性。 所以我更新它，以便视图更新

于 2020-04-21T09:04:16.207 回答