如何在角度 7 中动态显示表格的行数据

Question

我有一个要在其中创建表格的 HTML 页面。此表中的列是动态的，这意味着它们是使用 any[] 类型从服务器获取到组件中的变量中的。该表中的数据也是动态的，这意味着在编程时我不知道哪些列和数据会被绑定到表中。

我尝试了下面的代码，但它似乎不起作用或给出任何错误。它只是在 tbody 中创建空的 td。 费用.component.html

    <div id="invoice-items-details" class="pt-2">
     <div class="row">
         <div class="table-responsive col-sm-12">
           <table class="table">
             <thead>
             <tr>
              <th class="text-left" *ngFor = "let column of displayColumns">
                {{column.name}}
              </th>                                                                        
             </tr>
       </thead>
     <tbody>
           <tr *ngFor="let list of userInfoList ; let i=index">
              <td *ngFor="let key of list | keyvalue" > 
               {{key.value}}
             </td>
           </tr>
    </tbody>                                    
    </table>
    </div>
    </div>                                                    
  </div>

我的动态列列表是 显示列 =

[ 
{name: "S.No", value: "sNo"}
{name: "Customer", value: "CustomerName"}
{name: "Quantity", value: "Quantity"}
{name: "Weight", value: "Weight"}
{name: "TotalAmount", value: "TotalAmount"}
{name: "TotalOrders", value: "TotalOrders"}
] 

- 这个数组将动态出现... 我的行数据是

userInfoList =[ 
{CustomerName: "bindu", Quantity: "4232", Weight: "8970.9700", TotalAmount: "28810924.31", TotalOrders: "135", sNo =1}
{CustomerName: "hima", Quantity: "54", Weight: "104.0000", TotalAmount: "168268.00", TotalOrders: "3", sNo:2}
{CustomerName: "testby bindu", Quantity: "23", Weight: "12.0000", TotalAmount: "20076.00", TotalOrders: "1", sNo:3}
{CustomerName: "Bindu", Quantity: "23", Weight: "33.0000", TotalAmount: "51870.00", TotalOrders: "1", sNo:4}
 {CustomerName: "test", Quantity: "117", Weight: "282.0000", TotalAmount: "974760.72", TotalOrders: "9", sNo:5}

这个数组也是动态的..

我也在加载数据，但是关于列的订单缺失，所以你请建议我插槽 在我得到的数据下面，它通过列名丢失了顺序。

Answer 1

一种快速的解决方法是直接使用displayColumns 变量的value 属性访问属性。试试下面的

<div id="invoice-items-details" class="pt-2">
  <div class="row">
    <div class="table-responsive col-sm-12">
      <table class="table">
        <thead>
          <tr>
            <th class="text-left" *ngFor="let column of displayColumns">
              {{column.name}}
            </th>                                                                        
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let list of userInfoList; let i=index">
            <td *ngFor="let column of displayColumns">
              {{ list[column['value']] }}
            </td>
          </tr>                                                                        
        </tbody>                                    
      </table>
    </div>
  </div>                                                    
</div>

Answer 2

你可以建立一个管道来转换你的数据。

你可以看看这个Stackblitz demo。

interface ColumnMetaData {name: string;value: string;}

@Pipe({name: "fixColumnOrder"})
export class FixColumnOrderPipe implements PipeTransform {
  transform(value: any, columns?: ColumnMetaData[]): any[] {
    return columns.map((c: ColumnMetaData) => value[c.value]);
  }
}

那么你可以这样使用它：

<tr *ngFor="let user of userInfoList">
  <td *ngFor="let columnData of (user | fixColumnOrder: displayColumns)">
    {{columnData}}
  </td>
</tr>

[旁注]： 有时，当您担心性能（为每个数据一遍又一遍地重新执行管道）时，您可以使用记忆技术来避免它，或者只需使用库来执行此操作，例如 memo-decorator。不幸的是，在这种情况下，它并没有太大帮助，因为每一行都有不同的数据，但很高兴知道有这样的库可用。

npm install --save memo-decorator

import memo from 'memo-decorator';

interface ColumnMetaData {name: string;value: string;}

@Pipe({name: "fixColumnOrder"})
export class FixColumnOrderPipe implements PipeTransform {
  @memo()
  transform(value: any, columns?: ColumnMetaData[]): any[] {
    return columns.map((c: ColumnMetaData) => value[c.value]);
  }
}

Answer 3

您可以在此处查看实时工作示例：

在这个动态数据显示在 Angular 9 的表格行中，通过这个 youtube 视频，你会很容易得到。

Dynamic data in table row angular 9

谢谢