I'm working in an Angular2 v8 app, specificaly in a material explosion software. The problem is that when I want to calculate the cost of a product, all materials are separated in N groups, that's what I need N mat-table.
This is my array of groups:
groups: GroupItem[] = [
{ _id: '', name: 'Group 1', subtotal: 0, gain: 0, gainPercent: 0, total: 0, materials: [] },
{ _id: '', name: 'Group 2', subtotal: 0, gain: 0, gainPercent: 0, total: 0, materials: [] },
{ _id: '', name: 'Group 3', subtotal: 0, gain: 0, gainPercent: 0, total: 0, materials: [] }
];
If you see, each item of my groups
has a property called materials
and that's where I push my materials typed by my ProductMaterialItem
interface.
export interface ProductMaterialItem {
material: name;
quantity: number;
cost: number;
}
So, obviously, my many mat-table items has to display the data of each materials: []
array
This is my component.html where I want to print my materials
<div id="groups-container" style="width: 100%;">
<div class="group-item" *ngFor="let group of groups; let i = index">
<div id="group-header" class="group-header">
<span>{{ group.name }}</span>
</div>
<div id="materials-content">
<table mat-table [dataSource]="group.materials" fxFlex="100">
<ng-container [matColumnDef]="column.name" *ngFor="let column of displayedColumnsA">
<th mat-header-cell *matHeaderCellDef> {{column.label}} </th>
<td mat-cell *matCellDef="let element"> {{element[column.name]}} </td>
</ng-container>
<ng-container matColumnDef="options">
<th mat-header-cell *matHeaderCellDef style="width: 30px;">
<a (click)="addMaterial(i)">Add Material</a>
</th>
<td mat-cell *matCellDef="let element" style="width: 30px;">
<mat-icon class="material-icons-outlined">cancel</mat-icon>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>
</div>
</div>
</div>
this is my component.ts
displayedColumnsA = [
{ name: 'name', label: 'Material' },
{ name: 'quantity', label: 'Quantity' },
{ name: 'costu', label: 'Cost' },
{ name: 'costt', label: 'Total Cost' }];
displayedColumns: string[] = ['name', 'quantity', 'costu', 'costt', 'options'];
columnsToDisplay: string[] = this.displayedColumns.slice();
constructor() { }
ngOnInit() {}
addMaterial(index: number) {
this.dialogRef = this.dialog.open(AddMaterialComponent, {
width: '650px',
disableClose: true,
data: { title: 'Add Material' }
});
this.dialogRef.afterClosed().subscribe(result => {
if (result !== undefined) {
if (result !== false) {
this.groups[index].materials.push(result); // Everything works fine at this point, the material was added succsesfuly
// and here is where I need to refresh the table whith the this.groups[index].materials new value. But I tried everything without succesful
console.log(this.groups[index].materials);
}
}
});
}
Is any way to force the mat-table refresh with the new values?
Note: I tried ChangeDetectorRef
and didn't work
renderRows()
on table – Sameer