Question

我在我的Angle 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)" 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，但是接合不起作用。

Answer 1

尝试通过重置datasource的{{1}}或将data的{{1}}更新为：

datasource

Answer 2

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

constructor(private cdr:ChangeDetectionRef)

和

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

Answer 3

使用井号<mat-table>对<mat-table #table [dataSource]="dataSource">进行引用。

获取组件ts中的引用：

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

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

this.table.renderRows();

Answer 4

请准确复制这些步骤。

->步骤1

dataSource: any = new MatTableDataSource()

->步骤2在索引处拼接

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

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

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

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

“属性'_data'是私有的，只能在类中访问 “ MatTableDataSource”

不要忘了dataSource：

step#1 'dataSource : any'

->步骤2的详细信息（仅提供信息）

当我进行控制台操作时，我看到dataSource的行为'_data'主题属性。因此，我对其进行了更新，以便视图得以更新。

如何在角度5垫表中拼接数据？

4 个答案: