角7:遍历复杂对象并填充表

Question

我试图把物体传递给一个角度分量。我需要循环遍历对象并填充表。目前，我已经传递了两个对象。我能够获得TrackRecord对象的长度，因为它是简单的数组。我似乎无法得到FundStatistics对象的长度，因为它似乎很复杂。我猜想对象中有数据。

FundStatistics的JSON结构

"{"237146":[{"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 class="panel panel-default">
        <div class="panel-heading product-heading">
            <span style="font-size: 14px; font-weight: bold;">Performance Track Record and Statistics</span>
        </div>
        <div *ngIf ="ViewModel.FundPerformance" class="panel-body" style="width:100%">
            <div *ngFor="let ftr of ViewModel.FundPerformance">
                <div style="clear: both;"></div>
                <br /><br />
                <fund-statistics [fundStatistics]="ftr.FundStatistics"  [fundTrackRecord]= "ftr.TrackRecord"></fund-statistics>
            </div>

        </div>
    </div>

组件代码

export class FundStatisticsComponent implements OnInit {
    @Input() fundStatistics: any;
    @Input() fundTrackRecord: any;

    ngOnInit() {
    }
}

下面是我想要填充的表格。我基本上想要填充数组的m_Item2，例如表中第一列的ArithmeticMean和表中算术平均数的第二列下的ArithmeticMean的m_Item3。

<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"></td>
                    <td class="tableItem"></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>

    </table>            
  </div>   

Answer 1

*ngFor不支持对象或地图上的迭代。您可以使用Object.keys(fundStatistics)获取密钥，然后将它们用作*ngFor的值。

export class FundStatisticsComponent implements OnInit {
    @Input() fundStatistics: any;
    @Input() fundTrackRecord: any;
    fundStatisticksKeys = [];

    ngOnInit() {
        this.fundStatisticksKeys = Object.keys(this.fundStatistics);
    }
}

然后在模板中执行以下操作

<div *ngFor="let key of fundStatisticksKeys">

并将当前元素作为fundStatistics[key]

从角度6.1开始，还有一种叫做KeyValuePipe https://angular.io/api/common/KeyValuePipe#description的新管道，它可以精确地用于这种情况

在这种情况下，您不需要事先获得对象键，只需在模板中使用管道，就可以在模板中获得fundStats.key和fundStats.value，比如fundStats.value.m_Item1

<div *ngFor="let fundStats of fundStatistics | keyvalue">

然后，编辑，为了填充表，您可以使用这样的插值，如果我正确理解您需要什么。value将保存正在循环的条目的值

<tr class="rowItem">
    <td class="titleTableItem  header">Arithmetic Mean </td>
    <td class="tableItem">{{ fundStats.value.m_Item2 }}</td>
    <td class="tableItem">{{ fundStats.value.m_Item3 }}</td>
    <td class="tableItem"></td>
    <td class="tableItem"></td>
</tr>

如果您没有固定数量的m_Item*值，也可以使用ngFor对这些值进行循环