Utilizing Angular 2's *ngFor and string interpolation, I am able to iterate over sub-fields and display them on the screen alongside their respective "count" values. Here is an example of the data structure in the database:
[
{
"_id": {
"status": "gold",
"sub": "Category A"
},
"count": 19
},
{
"_id": {
"status": "gold",
"sub": "Category B"
},
"count": 27
},
{
"_id": {
"status": "gold",
"sub": "Category C"
},
"count": 24
},
{
"_id": {
"status": "",
"sub": "Category D"
},
"count": 11
}
]
Displayed in the view using the following code snippet:
<ul class="action-list">
<li *ngFor="let record of records" class="action">{{record._id.sub}}<span class="action-counts">{{record.count}}</span></li>
</ul>
The counts service is invoked in the component as follows:
ngOnInit() {
this.streamGoldCountsService.getCount()
.subscribe(resRecordsData => this.records = resRecordsData,
responseRecordsError => this.errorMsg = responseRecordsError);
}
Everything is functioning correctly so far.
I am now faced with a challenge - how can I calculate the total count of all sub-fields and display it on the screen? Since we don't have this total stored in the database, I will need to perform some calculations within the component. Any suggestions on the best approach for achieving this?