Angular 7: цикл через сложный объект и заполнение таблицы
Я пытаюсь передать объект угловому компоненту. Мне нужно перебрать объект и заполнить таблицу. На данный момент я сдал два объекта. Я могу получить длину объекта TrackRecord, поскольку это простой массив. Кажется, я не могу получить длину объекта FundStatistics, поскольку он кажется сложным. Я предполагаю, что в объекте есть данные.
JSON-структура 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() {
}
}
Ниже приведена таблица, которую я хочу заполнить. Я в основном хочу заполнить, например, m_Item2 ArithmeticMean массива в первом столбце под средним арифметическим в таблице и m_Item3 ArithmeticMean в массиве под вторым столбцом среднего арифметического в таблице
<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>
Ответы 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, также есть новый Pipe под названием KeyValuePipehttps://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 для зацикливания на них.
Не в моем случае ключ и несколько значений
@ Том, я обновил ответ. Насколько я помню, .value будет содержать значение записи, которую вы зацикливаете.
вы также можете создавать геттеры для этих ключей, например get keysOfMyObj(), а не определять их внутри ngOninit или конструктора.
И как вы предлагаете мне присвоить значения столбцам в таблице, как я упоминал в сообщении