I'm trying to display values of an array from a *ngFor
const blockData = [
{text: sampleText1, array: [val1]},
{text: sampleText2, array: [val2, dat2]},
{text: sampleText3, array: [val3, dat3]}
]
<div *ngFor="let data of blockData">{{data.text}}
<span>{{data.array}}</span></div>
How to display my both data.array values in my span
You can use ng-container and loop inside of your initial loop. Make sure that you clean up your blockData array and wrap the values inside quotes.
<div *ngFor="let data of blockData">{{data.text}}
<span>
<ng-container *ngFor="let item of data.array"> - {{item}} - </ng-container>
</span>
</div>
const blockData = [
{text: sampleText1, array: [val1]},
{text: sampleText2, array: [val2, dat2]},
{text: sampleText3, array: [val3, dat3]}
]
<div *ngFor="let data of blockData">{{data.text}}
<span *ngFor="let val of data.array">{{val}}</span>
</div>
Can't you do this?
You can use json pipe for that
const blockData = [
{text: sampleText1, array: [val1]},
{text: sampleText2, array: [val2, dat2]},
{text: sampleText3, array: [val3, dat3]}
]
<div *ngFor="let data of blockData">{{data.text}}
<span>{{data.array | json}}</span></div>