1
votes

I'm trying to update my table in angular 8, when data is added using renderRows() method but it is not working.

I have used @ViewChild and .renderRows() method after getting response also can anyone explain the meaning of this : {static: true}

//TODO: allocateMoney.ts

@ViewChild(MatTable, { static: true }) table: MatTable<any>;

openDialog() {

    let dialogRef = this.dialog.open(AllocateMoneyFormComponent, {
      disableClose: true,
      data: {
        projectId: this.projectId,
        budgetId: this.budgetId
      }
    });
    dialogRef.afterClosed().subscribe((result) => {
      if (result == 'loadData') {
        this.table.renderRows();
      }});
  }
//TODO: allocateMoney.html

<table class="example-list" mat-table [dataSource]="budget_dm.budget[budgetId].allocateMoney.tables.rows"
    class="mat-elevation-z8">

    <ng-container matColumnDef="id">
      <th mat-header-cell [style.display]="'none'" *matHeaderCellDef> Id </th>
      <td mat-cell [style.display]="'none'" *matCellDef="let element">{{element.id}}
      </td>
    </ng-container>

    <ng-container matColumnDef="categoryCode">
      <th mat-header-cell *matHeaderCellDef style="padding-left: 15px;"> Acc </th>
      <td mat-cell *matCellDef="let element">{{element.categoryCode}}
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="budget_dm.budget[budgetId].allocateMoney.tables.cols"></tr>
    <tr class="example-box" mat-row
      *matRowDef="let row; columns: budget_dm.budget[budgetId].allocateMoney.tables.cols;"></tr>
  </table>
//TODO: allocateMoneyForm.ts

isSubmitForm() {
    this.formdata.raw.projectId = this.projectId;
    this.formdata.raw.budgetId = this.budgetId;
    this.budgetService.allocateMoney(this.orgId, this.formdata.raw).then(resp => {
      if (resp) {
        this.toast_.successToastr("Money Allocated Success", "SUCCESS");
      } else {
        this.toast_.errorToastr("Money Allocated Failure", "ERROR");
      }

    });
    this.dialogRef.close('loadData');

  }

core.js:5847 ERROR TypeError: Cannot read property 'renderRows' of undefined at SafeSubscriber._next (allocate-money.component.ts:57) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:192) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53) at Subject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47) at SafeSubscriber._next (dialog.es5.js:429) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:192) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)

1
Did you able to fx this issue? I'm going through the same.ONE_FE

1 Answers

0
votes

Try adding the #table reference to your html mat table , this is to make sure your mat table childview is well instantiated