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

以下是我要填充的表。我基本上想填充例如表中算术平均值下第一列中数组的ArithmeticMean的m_Item2和表中算术平均值第二列下数组中的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]

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

Angular 7：循环遍历复杂对象并填充表

1 个答案: