使用ngFor嵌套循環實現動態列標題和值的HTML th和td標籤

Question

<p>我正在嘗試建立具有動態tr和td的HTML表格。 我在HTML中新增了嵌套循環，動態列標題（th）工作正常，但值沒有添加到正確的td中。</p> <p>這是我擁有的數據：</p>

「finalResult」: [
        {
            “表名稱”：“表_1”，
            “colCategories”：[
                {
                    “columnnnn”：“用戶”，
                    “值”：[
                        {
                            “值”：“0”
                        },
                        {
                            “值”：“10”
                        },
                        {
                            “值”：“60”
                        },
                        {
                            “值”：“0”
                        },
                        {
                            “值”：“0”
                        },
                        {
                            “值”：“0”
                        },
                        {
                            “值”：“0”
                        },
                        {
                            “值”：“0”
                        },
                        {
                            “值”：“0”
                        }
                    ]
                },
                {
                    “列nnnn”：“標題1”，
                    “值”：[
                        {
                            “值”：“460”
                        }
                    ]
                },
                {
                    “columnnnn”：“金額”，
                    “值”：[
                        {
                            “值”：“10”
                        },
                        {
                            “值”：“100”
                        },
                        {
                            “值”：“50”
                        }
                    ]
                }
            ]
        },
        {
            “表名稱”：“表_2”，
            “colCategories”：[
                {
                    “columnnnn”：“用戶”，
                    “值”：[
                        {
                            “值”：“07”
                        },
                        {
                            “值”：“10”
                        }
                    ]
                },
                {
                    “columnnnn”：“金額”，
                    “值”：[
                        {
                            “值”：“70”
                        }
                    ]
                },
                {
                    “columnnnn”：“用戶1”，
                    “值”：[
                        {
                            “值”：“57”
                        }
                    ]
                },
                {
                    “columnnnn”: “列”,
                    “值”：[
                        {
                            “值”：“80”
                        }
                    ]
                },
                {
                    “columnnnn”：“第 2 列”，
                    “值”：[
                        {
                            “值”：“10”
                        }
                    ]
                }
            ]
        }
    ]</pre>
<p>以下是HTML程式碼：</p>
<pre class="brush:php;toolbar:false;"><div *ngFor="讓 j of FinalResult;索引為i”類別=“”>
    
 表格名稱：{{j.tableNamee}} 
    
;
    
    

        <table class=“table table-bordered”>
            <正文>
                
                    <第 類別=“”範圍=“col”； *ngFor="讓 k of j.colCategories">
                        {{k.columnnnn}}
                    
                
                
                    
                        
                            <div *ngFor=“讓 m 個 k.values”>
                                
                                    
  {{m.value}} </span>
                                    
                                </td>
                            
                        </ng-容器>
                    
                </ng-容器>
            </tbody>
    
        </表>
    

Answer 1

你的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>