en el TS declaro la tabla y sus columns, tambien el servicio que trae a los productos y sus categorias en el json mostrado mas abajo, puedo leer las propiedades del producto pero no sus distintas categorias. ¿como puedo mostrar todas las categorias de un producto en mi tabla?
export class ListComponent implements OnInit,AfterViewInit {
//data table
dataSource: any;
//colum table
displayedColumns: string[] = ['id', 'name', 'description','categories','actions'];
constructor(
private productSvc:ProductService
) { }
ngOnInit(): void {
this.getProducts();
this.productSvc.getProduct().subscribe(res=>console.log(res))
}
getProducts():void{
this.productSvc.getProduct().subscribe((res: ProductI[]) => {
this.dataSource = new MatTableDataSource<ProductI>(res)
})
}
}
el json que trae el metodo getProducts() es el siguiente
[
{
"id": 11,
"name": "Buzo poly",
"description": "buzo + top ",
"createdAt": "2022-02-26T21:48:55.009Z",
"updateAt": "2022-02-26T21:48:55.009Z",
"categories": [
{
"id": 2,
"name": "Buzos Mujer",
"description": "Buzos plust ",
"createdAt": "2022-02-21T01:08:32.968Z",
"updateAt": "2022-02-21T01:14:19.000Z"
}
]
}
]
y en el HTML solo puedo leer las propiedades del productos pero no de sus categorias
<table mat-table [dataSource]="dataSource" class="table mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- ID Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> Id</th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- description Column -->
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef> Description </th>
<td mat-cell *matCellDef="let element"> {{element.description}} </td>
</ng-container>
<!-- cagories Column -->
<ng-container matColumnDef="categories">
<th mat-header-cell *matHeaderCellDef> Categories </th>
<td mat-cell *matCellDef="let element"> {{element.cagories}} </td>
</ng-container>