将列数据动态加载到 Angular 中的 table 9

Question

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

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

在上面的代码中，列已成功创建，但 table 头部数据不工作

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

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>

将列数据动态加载到 Angular 中的 table 9

Dynamically loading columns data into table in Angular 9

angular

angular9