Question

我正在尝试填充一个角度为7的表格。该表格的顶部将有固定的列，该列将是前两行，并且从第三行开始的第一列将具有固定的标签。

我需要遍历数组并填充其余单元格。由于我有一个外循环，目前正在打印三个表。如何在仅填充单元格的地方循环播放。

目前，这就是数据的样子

[
  {
    "m_Item1": "ArithmeticMean",
    "m_Item2": 0.005521221052631577,
    "m_Item3": 0.01912607076595362
  },
  {
    "m_Item1": "AverageGain",
    "m_Item2": 0.038913171935483874,
    "m_Item3": 0.13479918175184283
  },
  {
    "m_Item1": "AverageLoss",
    "m_Item2": -0.03429225884615385,
    "m_Item3": -0.11879186925568348
  }
]

我需要填充下表。目前，我只设置了算术平均值，我需要分配所有其他字段。但是现在我主要关心的是如何仅迭代行而不是表。另外请注意，如果行是动态的，则在没有数据的情况下需要打印空单元格

以下是我正在使用的代码

<div *ngFor="let fundStats of fundStatistics">
    <table class="statsTable">
        <tr>
            <td></td>
            <td colspan="2" class="tableItem header">Fund Name</td>

            <td colspan="2" class="headerTableItem header">Benchmark</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td class="tableItem bold">Monthly </td>
            <td class="tableItem bold">Annualized</td>
            <td class="tableItem bold">Monthly </td>
            <td class="tableItem bold">Annualized</td>
        </tr>
        <tr class="rowItem">
            <td class="titleTableItem header">Compound ROR</td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
        </tr>
        <tr class="rowItem">
            <td class="titleTableItem  header">Arithmetic Mean </td>
            <td class="tableItem">{{fundStats.m_Item2}}</td>
            <td class="tableItem">{{fundStats.m_Item3}}</td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
        </tr>
        <tr class="rowItem">
            <td class="titleTableItem  header">Standard Deviation</td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
        </tr>
        <tr class="rowItem">
            <td class="titleTableItem  header">Average Gain</td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
        </tr>
        <tr class="rowItem">
            <td class="titleTableItem  header">Average Loss</td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
        </tr>
        <tr class="rowItem">
            <td class="titleTableItem  header">Downside Deviation</td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
        </tr>
        <tr class="rowItem">
            <td class="titleTableItem  header">Sharpe</td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
        </tr>
        <tr class="rowItem">
            <td class="titleTableItem  header">Sortino</td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
        </tr>
        <tr class="rowItem">
            <td class="titleTableItem  header">Skewness</td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
        </tr>
        <tr class="rowItem">
            <td class="titleTableItem  header">Kurtosis</td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
        </tr>
        <tr class="rowItem">
            <td class="titleTableItem header">Gain Deviation</td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
        </tr>
        <tr class="rowItem">
            <td class="titleTableItem header">Loss Deviation</td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
        </tr>
        <tr class="rowItem">
            <td class="titleTableItem  header" style="border-bottom: solid 1px lightgrey">Av Gain / Av Loss</td>
            <td class="tableItem" style="border-bottom: solid 1px lightgrey"></td>
            <td class="tableItem" style="border-bottom: solid 1px lightgrey"></td>
            <td class="tableItem" style="border-bottom: solid 1px lightgrey"></td>
            <td class="tableItem" style="border-bottom: solid 1px lightgrey"></td>
        </tr>
    </table>
</div>

Answer 1

将循环保留在表内以生成行

<table class="statsTable">
        <tr>
            <td></td>
            <td colspan="2" class="tableItem header">Fund Name</td>

            <td colspan="2" class="headerTableItem header">Benchmark</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td class="tableItem bold">Monthly </td>
            <td class="tableItem bold">Annualized</td>
            <td class="tableItem bold">Monthly </td>
            <td class="tableItem bold">Annualized</td>
        </tr>
        <tr *ngFor="let fundStats of fundStatistics">
          <td class="titleTableItem  header">{{fundStats.m_Item1}}</td>
            <td class="tableItem">{{fundStats.m_Item2}}</td>
            <td class="tableItem">{{fundStats.m_Item3}}</td>
            <td class="tableItem"></td>
            <td class="tableItem"></td>
        </tr>
        <tr class="rowItem">
            <td class="titleTableItem  header" style="border-bottom: solid 1px lightgrey">Av Gain / Av Loss</td>
            <td class="tableItem" style="border-bottom: solid 1px lightgrey"></td>
            <td class="tableItem" style="border-bottom: solid 1px lightgrey"></td>
            <td class="tableItem" style="border-bottom: solid 1px lightgrey"></td>
            <td class="tableItem" style="border-bottom: solid 1px lightgrey"></td>
        </tr>
    </table>

检查https://stackblitz.com/edit/angular-nlswav

Angular 7：循环遍历数组并填充表

1 个答案: