在角度模板中显示数组元素答案

【问题标题】：Display array elements in angular template在角度模板中显示数组元素
【发布时间】：2022-01-12 20:54:30
【问题描述】：

我正在尝试显示来自 *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>

如何在我的 span 中显示我的两个 data.array 值

【问题讨论】：

你的意思是这样的？ <span>{{data.array.join(',')}}</span></div> - 还是您想用另一个 *ngFor 循环遍历数组值？

标签： javascript html angular

【解决方案1】：

您可以在初始循环中使用 ng-container 和循环。确保清理你的 blockData 数组并将值包含在引号内。

<div *ngFor="let data of blockData">{{data.text}} 
    <span>
        <ng-container *ngFor="let item of data.array"> - {{item}} - </ng-container>
    </span> 
</div>

【讨论】：

【解决方案2】：

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>

你不能这样做吗？

【讨论】：

【解决方案3】：

您可以为此使用json 管道

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>

【讨论】：