angular - 在Angular 9中将列数据动态加载到表中

Question

我想动态获取表头数据我该怎么做？

我的 HTML：-

<table border="1">
                <thead>
                    <tr *ngFor="let SR of StockReport;">
                        <td>
                            <b></b>
                        </td>
                        <td><b></b></td>
                        <td><b></b></td>
                        <td><b></b></td>
                        <td><b></b></td>
                      
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let SR of StockReport;let inx=index">
                        <td style="width: 11%;">{{inx+1}} </td>
                        <td>{{SR.ItemName}} </td>
                        <td align="right">{{SR.Inward}} </td>
                        <td align="right"> {{SR.Outward}}</td>
                        <td align="right">{{SR.Stock}} </td>

                    </tr>
                </tbody>
            </table>

在上面的代码中，列已成功创建，但表头数据不起作用

json 数据：- {“ItemName”：“CV CPU”，“向内”：“50.00”，“向外”：“0.00”，“库存”：“50.00”}，

标签： angularangular9

Answer 1

演示：https ://stackblitz.com/edit/angular6-keyvaluepipe-demo-zcesna

<table border="1">
                <thead>
                    <tr>
                        <td> Sr. No.</td>
                        <td *ngFor="let key of tableHeader ">
                            <b>{{key}}</b>
                        </td>
                         
                      
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let SR of StockReport; let i = index">
                        <td style="width: 11%;">{{i+1}} </td>
                        <td>{{SR.BranchID}} </td>
                         <td align="right">{{SR.Brand}} </td>
                       
                        <td align="right">{{SR.Inward}} </td>
                        
                        <td align="right">{{SR.ItemID}} </td>
                         <td>{{SR.ItemName}} </td>
                         <td>{{SR.ItemSubGrp}} </td>
                         <td align="right">{{SR.ModelNO}} </td> 
                         
                          <td align="right"> {{SR.Outward}}</td>
                          <td align="right">{{SR.Stock}} </td>

                    </tr>
                </tbody>
            </table>