Angular6 * ngFor在对象中包含对象的表 [英] Angular6 *ngFor table with objects in object

问题描述

我正在使用Angular 6表，但是我遇到了*ngFor项的麻烦.

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

这是我的html视图

<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>

这是我的component.ts数组

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
        }
      ]
    }
 ];`

基本上，我想做的是添加一个新的<tr>，它是subcuentas，当然这只是数组中的1个元素，但是当它带有2个或更多时.

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.

我的想法

我知道我无法通过在第一个*ngFor内添加第二个*ngFor来访问data.subcuentas，因为这是<tr>中断行的表.

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.

如何解决此问题?

推荐答案

我使用ng-container标签实现了这一目标.请参见下面的代码.希望这会有所帮助.

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>

输出:

关于ng-container元素.

About ng-container element.

1. 解释ng-container元素
2. https://angular.io/guide/structural-directives#group-sibling-elements-with-ng-container

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

这篇关于Angular6 * ngFor在对象中包含对象的表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！