I am trying to loop through "buttontext" once and display buttons (where the number of buttons is same as the elements in it), once the user clicks on that button the respective text from "buttontext" is to be displayed. But this is running "number of elements" + 1 times.
<div *ngIf="displaynextAnswer" class="row row-thumbs">
<div class="container">
<span class="nav nav-pills" *ngFor="let msg of buttontext; let i=index">
<span class="feedback-op base-margin" style="background-color: #404546;
color:white;" (click)="innerfeedbackfunc(i)">
Answer {{i}}</span>
</span>
</div>
</div>
buttontext is getting its data from here:
for (const item of Object.entries(result)){
if(typeof item == 'object'){
rec_ans = item[1]["Recommended Answer1"];
for(let i =start; i<=3;i++)
{
if(item[1].hasOwnProperty("Recommended Answer"+i))
{
let messagestobedisplayed = item[1]["Recommended Answer"+i];
if(typeof messagestobedisplayed == 'object')
{
for(var j in messagestobedisplayed){
this.messages.push({ 'text': messagestobedisplayed[j], 'botMessage': true,'displaynextAnswer':true,'image': this.botImage, 'date': this.formatAMPM(new Date()) });
this.buttontext.splice(j,0,messagestobedisplayed[j]);
}
}
else
{
this.messages.push({ 'text': messagestobedisplayed, 'botMessage': true,'displaynextAnswer':true,'image': this.botImage, 'date': this.formatAMPM(new Date()) });
}
}
}
}
}
I'm using *ngFor to traverse through the buttontext array but what i'm getting is this :
