CODEWITHSUNDEEP
angularangular-materialangular-material2
Hoàng Nguyễn
Hoàng Nguyễn

Reputation: 1170

Angular Material 2 how to update table data after edit without refreshing page?

I used angular material 2 to display a table of data as an order each row. I instantiated currentTradesData = new MatTableDataSource(); then initialize it in ngOnInit. The next action is when I cancel an order, the api returned a successful result, but that order row still shows cancel button in status cell instead of showing closed there, even thought I called method updateTableData to reinitialize the data source.

Below is my code:

order-history.component.ts:

export class OrderHistoryComponent implements OnInit {
  openColumns = ['amount', 'status'];
  resultsLength = 0;
  pageSize = 5;

  private paginator: MatPaginator;
  private sort: MatSort;

  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.setDataSourceAttributes();
  }

  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.setDataSourceAttributes();
  }

  currentTradesData = new MatTableDataSource();    
  currentTrades: Trades[] = [];

  constructor(private apiService: ApiService,
    private userService: UserService) { }

  ngOnInit() {
    this.getTrades();
  }

  getTrades() {
    this.apiService.getTrades().subscribe((data: any) => {
      this.currentTrades = data;
      this.currentTradesData.data = this.currentTrades;
      this.resultsLength = this.currentTradesData.data.length;
    }, error => {console.log(error); });
  }

  cancelTrade(id) {
    this.apiService.cancelTrade(id).subscribe((data) => {
      this.updateTableData(data, id);
      this.setDataSourceAttributes();
    }, error => {console.log(error); });
  }

  private updateTableData(data: any[], id) {
    const index = this.currentTrades.findIndex(x => x.id = id);
    this.currentTrades[index].isClosed = true;

    this.currentTradesData = data && data.length ? new MatTableDataSource(data)
      : new MatTableDataSource(this.currentTrades);

    this.resultsLength = this.currentTradesData.data.length;
    this.setDataSourceAttributes();
  }

  setDataSourceAttributes() {
    this.currentTradesData.paginator = this.paginator;
    this.currentTradesData.sort = this.sort;
  }
}

view:

<mat-table [dataSource]="currentTradesData" matSort>
          <mat-header-row *matHeaderRowDef="openColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: openColumns;"></mat-row>

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

          <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let row" class="text-center">
              <button mat-raised-button class="cancel-btn" *ngIf="!row.isClosed" (click)="cancelTrade(row.id)" color="warn">
                Cancel
              </button>
              <span *ngIf="row.isClosed == true">
                <mat-chip color="primary" selected="true">Closed</mat-chip>
              </span>
            </mat-cell>
          </ng-container> 
        </mat-table>
        <mat-paginator [pageSize]="pageSize" [length]="resultsLength"></mat-paginator>

Upvotes: 2

Views: 12235

Answers (1)

Santosh Singh
Santosh Singh

Reputation: 569

Your problem is that you are unable to update the Datasource of the grid may this link will help you out got through it and let me know if got any issue

Angular + Material - How To Refresh A Data Source (mat-table)

Upvotes: 2

Related Questions