I have an array in my subscribe function called this.Term. When I console log this array, it displays the following:
[Discount Condition:Array(3), Stay Consition:Array(2)]
Discount Condition:Array(3)
0:object
EventType:"success"
Heading:"Discount Condition"
Help:"Terms"
1:object
EventType:"success"
Heading:"Discount Condition"
Help:"Terms"
2:object
0:object
EventType:"success"
Heading:"Discount Condition"
Help:"Terms"
Stay Condition:Array(2)
0:object
1:object
In my component HTML file, I am trying to display this array using Angular's *ngFor directive like so,
<div *ngFor="let item of Term">
{{item.Heading}}
</div>
However, when I check the rendered elements in the browser inspect tool, it shows:
<!--template bindings={
"ng-reflect-ng-for-of": ""
}-->
This is the function responsible for populating the array:
getTerms(){
this.quoteService.getTerms()
.subscribe(
terms => {
this.terms = terms.resultData.Terms;
this.notes = terms.resultData.ImpNotes;
this.exclusions = terms.resultData.Exclusions;
var arr=[];
var strHeading;
for(let i=0;i<this.terms.length;i++) {
strHeading=this.terms[i].Heading;
if (arr.indexOf(strHeading) >= 0) {
this.uniqTerm[strHeading].push(this.terms[i]);
}
else {
if (!this.uniqTerm[strHeading])
this.uniqTerm[strHeading] = [];
this.uniqTerm[strHeading].push(this.terms[i]);
this.Term.push(this.uniqTerm);
arr.push(strHeading);
}
}
console.log(this.Term);
},
response => {
if (response.status == 404) {
//this.router.navigate(['NotFound']);
}
});
}
Can someone please help me identify where I might be making a mistake?