使用ngFor嵌套循环实现动态列标题和值的HTML th和td标签
P粉949267121
P粉949267121 2023-08-31 15:23:50
[HTML讨论组]

我正在尝试创建带有动态tr和td的HTML表格。 我在HTML中添加了嵌套循环,动态列标题(th)工作正常,但值没有添加到正确的td中。

这是我拥有的数据:

"finalResult": [
        {
            "tableNamee": "Table_1",
            "colCategories": [
                {
                    "columnnnn": "User",
                    "values": [
                        {
                            "value": "0"
                        },
                        {
                            "value": "10"
                        },
                        {
                            "value": "60"
                        },
                        {
                            "value": "0"
                        },
                        {
                            "value": "0"
                        },
                        {
                            "value": "0"
                        },
                        {
                            "value": "0"
                        },
                        {
                            "value": "0"
                        },
                        {
                            "value": "0"
                        }
                    ]
                },
                {
                    "columnnnn": "Header1",
                    "values": [
                        {
                            "value": "460"
                        }
                    ]
                },
                {
                    "columnnnn": "Amount",
                    "values": [
                        {
                            "value": "10"
                        },
                        {
                            "value": "100"
                        },
                        {
                            "value": "50"
                        }
                    ]
                }
            ]
        },
        {
            "tableNamee": "Table_2",
            "colCategories": [
                {
                    "columnnnn": "User",
                    "values": [
                        {
                            "value": "07"
                        },
                        {
                            "value": "10"
                        }
                    ]
                },
                {
                    "columnnnn": "Amount",
                    "values": [
                        {
                            "value": "70"
                        }
                    ]
                },
                {
                    "columnnnn": "User1",
                    "values": [
                        {
                            "value": "57"
                        }
                    ]
                },
                {
                    "columnnnn": "Column",
                    "values": [
                        {
                            "value": "80"
                        }
                    ]
                },
                {
                    "columnnnn": "Column2",
                    "values": [
                        {
                            "value": "10"
                        }
                    ]
                }
            ]
        }
    ]

以下是HTML代码:

<div *ngFor="let j of finalResult; index as i" class="">
    <div class=""> <span title="{{j.tableNamee}}">Table Name : {{j.tableNamee}} </span>
    </div>
    
    <div class="">
        <table class="table table-bordered">
            <tbody>
                <tr class="">
                    <th class="" scope="col" *ngFor="let k of j.colCategories">
                        {{k.columnnnn}}
                    </th>
                </tr>
                <ng-container *ngFor="let k of j.colCategories">
                    <tr class="">
                        <ng-container>
                            <div *ngFor="let m of k.values">
                                <td class="">
                                    <div class=""> <span title="{{m.value}}"> {{m.value}} </span>
                                    </div>
                                </td>
                            </div>
                        </ng-container>
                    </tr>
                </ng-container>
            </tbody>
    
        </table>
    </div>
    </div>

这里没有特定的ts代码。我只是按照上述格式操作数据,并尝试在HTML中应用循环。我做错了什么吗?

这是期望的输出: 期望的输出

这是我得到的当前输出: 当前输出

任何帮助将不胜感激!

P粉949267121
P粉949267121

全部回复(1)
P粉511896716

你的HTML标记看起来很奇怪,因为你的<tr>包含一个包裹<td><div>。我认为这就是导致你的问题的原因。

我没有尝试过,但你可以尝试将你的<table>标记更改为以下内容:

<table class="table table-bordered">
        <thead>
            <tr class="">
                <th class="" scope="col" *ngFor="let k of j.colCategories">
                    {{k.columnnnn}}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="" *ngFor="let k of j.colCategories">
                <td class="" *ngFor="let m of k.values">
                    <div class="">
                        <span title="{{m.value}}"> {{m.value}} </span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号