angular - Angular 7：遍历数组并填充表格

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>

标签： angular

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