Angular 7:遍历复杂对象并填充表 [英] Angular 7 : Looping through complex object and populating the table

问题描述

我正在尝试将对象传递给角度组件.我需要遍历对象并填充表.目前，我已经传递了两个对象.我能够获取TrackRecord对象的长度，因为它是简单的数组.我似乎无法获得FundStatistics对象的长度，因为它似乎很复杂.我认为对象中有数据.

I am trying to pass object to an angular component. I need to loop through the object and populate the table. Currently I have passed two objects. I am able to get the length of the TrackRecord object as it is simple array. I cant seem to get the length of the FundStatistics object as it seems to be complex. I presume there is data in the object.

FundStatistics的JSON结构

JSON structure of FundStatistics

"{"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() {
    }
}

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

Following is the table that I want to populate. I basically want to populate For e.g m_Item2 of ArithmeticMean of the array in first column under Arithmetic Mean in the table and m_Item3 of ArithmeticMean in the array under second column of Arithmetic Mean in the table

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

推荐答案

* ngFor 不支持在对象或地图上进行迭代.您可以使用 Object.keys(fundStatistics)来获取密钥，然后将其用作 * ngFor

*ngFor doesn’t support iterations over objects or Maps. You could either use Object.keys(fundStatistics) to get the keys, and then use those as values for *ngFor

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

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

然后在模板中执行类似的操作

And then in your template do something like

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

并将当前元素获取为 fundStatistics [key]

从Angular 6.1开始，还有一个名为 KeyValuePipe 的新管道https://angular.io/api/common/KeyValuePipe#description 可以完全用于此类情况

Starting from Angular 6.1 there is also a new Pipe called KeyValuePipe https://angular.io/api/common/KeyValuePipe#description which can be used exactly for cases like these

在这种情况下，您无需事先获取对象密钥，只需使用模板中的管道即可获得 fundStats.key 和 fundStats.value 在模板中，例如 fundStats.value.m_Item1

In this case you don't need to get the object keys beforehand, just use the pipe in your template and you will get fundStats.keyand fundStats.value in your template, like fundStats.value.m_Item1

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

修改然后，如果我正确理解您的需求，则可以使用像这样的插值来填充表格. value 将保存您要循环访问的条目的值

Edit Then in order to populate the table you could use interpolation like this, if I understand correctly what you need. value will hold the value of the entry you're looping on

<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在其上循环

If you have don't have a fixed number of m_Item* value, you could use a ngFor to loop on those as well

这篇关于Angular 7:遍历复杂对象并填充表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！