CODEWITHSUNDEEP
angulartypescript
Hellz
Hellz

Reputation: 3

Angular6 *ngFor table with objects in object

I'm working with Angular 6 tables but i'm facing a trouble with a *ngFor item.

This is my html view

<table class="table table-bordered text-center">
  <tr>
    <th class="text-center">Cuenta</th>
    <th class="text-center">ENE 2018</th>
    <th class="text-center">Proy. Lineal</th>
    <th class="text-center">Proy. Sugerida</th>
    <th class="text-center">Proy. Comercial</th>
    <th class="text-center">Presupuesto a convenir</th>
  </tr>
  <tr *ngFor="let data of centroData; let id = index">
    <td>
      <span>{{data.id}}</span>
    </td>
    <td>
      <span>{{data.ENE2018}}</span>
    </td>
    <td>
      <span>{{data.ProyLinealCalculado}}</span>
    </td>
    <td>
      <span>{{data.ProySugeridaCalculado}}</span>
    </td>
    <td>
      <span>{{data.ProyComercialCalculado}}</span>
    </td>
    <td>
      <span>{{data.Presupuesto}}</span>
    </td>
  </tr>
</table>

This is my component.ts array

centroData: Array<any> = [
    {
      id: 123333123,
      ENE2018: 1340300,
      ProyLinealCalculado: 1393939,
      ProySugeridaCalculado: 1239393,
      ProyComercialCalculado: 3039430,
      Presupuesto: null,
      subcuentas: [
        {
          id: 1,
          folio: "123333123-01",
          ENE2018: 39394,
          ProyLinealCalculado: 1393939,
          ProySugeridaCalculado: 1239393,
          ProyComercialCalculado: 3039430,
          Presupuesto: null
        },
        {
          id: 2,
          folio: "123333123-02",
          ENE2018: 39394,
          ProyLinealCalculado: 1393939,
          ProySugeridaCalculado: 1239393,
          ProyComercialCalculado: 3039430,
          Presupuesto: null
        }
      ]
    }
 ];`

Basically, what I want to do is add a new <tr> that is subcuentas, of course this is only 1 element in the array, but when it comes with 2 or more.

What's in my mind

I know I can't access data.subcuentas by adding a second *ngFor inside the first *ngFor cause it's a table which <tr> breaks the row.

How to solve this issue?

Upvotes: 0

Views: 2175

Answers (1)

javapedia.net
javapedia.net

Reputation: 2731

I used ng-container tag to achieve this. See the below code. Hope this helps.

<table class="table table-bordered text-center">
  <tr>
    <th class="text-center">Cuenta</th>
    <th class="text-center">ENE 2018</th>
    <th class="text-center">Proy. Lineal</th>
    <th class="text-center">Proy. Sugerida</th>
    <th class="text-center">Proy. Comercial</th>
    <th class="text-center">Presupuesto a convenir</th>
  </tr>
  <ng-container *ngFor="let data of centroData; let id = index">
    <tr>
    <td>
      <span>{{data.id}}</span>
    </td>
    <td>
      <span>{{data.ENE2018}}</span>
    </td>
    <td>
      <span>{{data.ProyLinealCalculado}}</span>
    </td>
    <td>
      <span>{{data.ProySugeridaCalculado}}</span>
    </td>
    <td>
      <span>{{data.ProyComercialCalculado}}</span>
    </td>
    <td>
      <span>{{data.Presupuesto}}</span>
    </td>
  </tr>

  <tr *ngFor="let data of data.subcuentas; let id = index">
    <td>
      <span>{{data.id}}</span>
    </td>
    <td>
      <span>{{data.ENE2018}}</span>
    </td>
    <td>
      <span>{{data.ProyLinealCalculado}}</span>
    </td>
    <td>
      <span>{{data.ProySugeridaCalculado}}</span>
    </td>
    <td>
      <span>{{data.ProyComercialCalculado}}</span>
    </td>
    <td>
      <span>{{data.Presupuesto}}</span>
    </td>
</tr>

  </ng-container>

  </table>

Output:

enter image description here

About ng-container element.

  1. Explain ng-container Element
  2. https://angular.io/guide/structural-directives#group-sibling-elements-with-ng-container

Upvotes: 2

Related Questions