Question

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

这是我的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数组

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个或更多时。

我的想法

我知道我无法通过在第一个data.subcuentas内添加第二个*ngFor来访问*ngFor，因为它是一个表，其中<tr>破坏了该行。

如何解决此问题？

Answer 1

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

<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元素。

Angular6 * ngFor表中包含对象

1 个答案: