Display array elements in angular template-CodePudding

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

CodePudding user response：

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?

CodePudding user response：

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>