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)