0

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?

1 Answer 1

2

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
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, that's what i needed. I'm new to Angular so i miss this details.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.