gpt4 book ai didi

angular - 应该显示在表格中的嵌套循环

转载 作者:行者123 更新时间:2023-12-05 09:25:47 24 4
gpt4 key购买 nike

我想创建一个 HTML 表格并显示每个国家/地区的数据 (PAYS_LIB)

我想得到这个结果:

<th>COUNTRY:</th>
BELGIUM
<th>LABEL:</th> | <th>ISINCODE: </th>
AB INBEV | NO0010571698
FRENCH
<th>LABEL:</th> | <th>ISINCODE: </th>
WWI | AO0010571614

现在,我有这个:

<th>COUNTRY:</th>
BELGIUM
FRENCH
<th>LABEL:</th> | <th>ISINCODE: </th>
AB INBEV | NO0010571698
<th>LABEL:</th> | <th>ISINCODE: </th>
WWI | AO0010571614

我不熟悉嵌套循环...

这里是JSON的概念

REGROUPEMENT = [
{
TYPEVALUE: 11,
ASSETCATLABEL: 'Actions individuelles',
CURRENCY: 'EUR',
AMOUNT: 1646956.5,
PERCENTAGE: 79.22,
ELEMENT: [
{
LABEL: 'AB INBEV',
PAYS_LIB: 'BELGIUM',
ISINCODE: 'NO0010571698',
},
{
LABEL: 'WWI',
PAYS_LIB: 'FRENCH',
ISINCODE: 'AO0010571614',
},
],
},
];

还有我的代码

<div class="container text-center ">
<h2 class="pt-3 pb-3">HTML Table</h2>

<table *ngFor="let item of REGROUPEMENT">
<tr>
<th>TYPE</th>
<th>PRICE</th>
</tr>
<tr >
<td>{{ item.ASSETCATLABEL }}</td>
<td>{{ item.AMOUNT }}</td>
</tr>

<tr>
<th colspan="3">COUNTRY</th>
</tr>
<tr *ngFor="let elem of item.ELEMENT">
<td colspan="3"> {{ elem.PAYS_LIB }} </td>

</tr>

<tr>
<th>LABEL</th>
<th>ISINCODE</th>
</tr>

<tr *ngFor="let elem of item.ELEMENT">
<td> {{ elem.LABEL}}</td>
<td> {{ elem.ISINCODE}}</td>
</tr>

</table>

</div>

我还创建了一个复制品=> https://stackblitz.com/edit/github-z6v4p8?file=src/app/todo/todo.component.ts

最佳答案

如果这是你想要的结果:

enter image description here

那么你的模板应该是这样的:

<table *ngFor="let item of REGROUPEMENT">
<tr>
<th>TYPE</th>
<th>PRICE</th>
</tr>
<tr>
<td>{{ item.ASSETCATLABEL }}</td>
<td>{{ item.AMOUNT }}</td>
</tr>
<tr>
<th colspan="2">COUNTRY</th>
</tr>
<ng-container *ngFor="let elem of item.ELEMENT">
<tr>
<td colspan=2>{{ elem.PAYS_LIB }}</td>
</tr>
<tr>
<th>LABEL</th>
<th>ISINCODE</th>
</tr>
<tr>
<td>{{ elem.LABEL }}</td>
<td>{{ elem.ISINCODE }}</td>
</tr>
</ng-container>
</table>

在这种方法中,我们使用了 *ngFor ng-container 上的属性.基本上,这会告诉 Angular 重复 ng-container 中的所有内容, 不包括 <ng-container/>标记自己。然后配合使用colspan=2 ,我们“拉伸(stretch)”没有 sibling 的列以更好地与整个表格对齐,从而形成上面屏幕截图中的表格。

关于angular - 应该显示在表格中的嵌套循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/75052072/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com