1

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>
    

1 respuesta 1

0

Dado que es un array una forma seria:

displayedColumns: string[] = ['id', 'name', 'description','categoriesId','categoriesName','categoriesDescription'];
<ng-container matColumnDef="categoriesId">
    <th mat-header-cell *matHeaderCellDef> CategoriesId </th>
    <td mat-cell *matCellDef="let element"> {{element.categories[0].id}} </td>
</ng-container>

<ng-container matColumnDef="categoriesName">
  <th mat-header-cell *matHeaderCellDef> Categories Name </th>
  <td mat-cell *matCellDef="let element"> {{element.categories[0].name}} </td>
</ng-container>
<ng-container matColumnDef="categoriesDescription">
  <th mat-header-cell *matHeaderCellDef> Categories Description </th>
  <td mat-cell *matCellDef="let element"> {{element.categories[0].description}} </td>
</ng-container>
y asi con todos los elementos del array fijate tambien que escribiste element.cagories Hay varias formas me parece la mas simple hasta se puede tambien mostrar los elementos de una sola columna categories con un select

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.