如何根据 json objects in Angular 6 中的 headers 序列显示 table 行数据？

Question

我在显示来自 JSON object 的动态 table 时遇到问题。我有两个数组。一个数组包含 table 的 header，另一个数组包含 JSON objects.The 问题是我希望数据按 header 数组值的顺序显示来自每个 JSON Object（每个 object 被视为行）。我试图显示数据的代码是：

    <table id="myTable">
    <tr >
    <th *ngFor="let head of FilteredKeys;let i =index" (click)="sortTable(i)">{{head}}</th>
    </tr>
    <tr *ngFor="let object of finalContactsArray;">

    <td *ngIf="hasProp('FilteredKeys', 'id')">{{object.id}}</td>
    <td *ngIf="hasProp('FilteredKeys', 'firstname')" >{{object.firstname}}</td>
    <td *ngIf="hasProp('FilteredKeys', 'lastname')">{{object.lastname}}</td>
    <td *ngIf="hasProp('FilteredKeys', 'prefix')">{{object.prefix}}</td>

     </tr>
    </table>

过滤后的键数组是：

    ["id","firstname","prefix","lastname"]

finalContactArray 是：

    [{"id":"1","firstname":"Vikas"},{"id":"2","firstname":"Raj","lastname":""},{"id":"3","prefix":"Mr.","lastname":"sdsdfsd"},{"id":"4","prefix":"Mrs."},{"id":"5","firstname":"Hari","prefix":"Mr."}]

对于问题的演示，stackblitz 是： https://stackblitz.com/edit/angular-8cacgk

在这里您可以看到前缀列值显示在 lastname.How 中以解决此问题？

我的工作代码：

     <table id="myTable">
     <tr >
     <th *ngFor="let head of FilteredKeys;let i =index" (click)="sortTable(i)">{{head}}</th>
     </tr>
     <tr *ngFor="let object of finalContactsArray;">
     <ng-container *ngFor="let head of FilteredKeys">
     <td *ngIf="head==='id' && hasProp('FilteredKeys', 'id')">{{object[head]}}</td>
     </ng-container>
     <ng-container *ngFor="let head of FilteredKeys">
     <td *ngIf=" head === 'prefix' && hasProp('FilteredKeys', 'prefix')" (click)="showalert()" style="cursor:pointer" >{{object[head]}}</td> 
     </ng-container>
     <ng-container *ngFor="let head of FilteredKeys">
     <td *ngIf=" head === 'firstname' && hasProp('FilteredKeys', 'firstname')" >{{object[head]}}</td>
     </ng-container>
     <ng-container *ngFor="let head of FilteredKeys">
     <td *ngIf=" head === 'lastname' && hasProp('FilteredKeys', 'lastname')">{{object[head]}}</td>
     </ng-container>

     </tr>

Answer 1

如果您的数据结构如此简单并且关系如此直接，您可以使用简单的嵌套 for 循环来实现：

<table id="myTable">
  <tr >
    <th *ngFor="let head of FilteredKeys;let i =index" (click)="sortTable(i)">{{head}}</th>
  </tr>
  <tr *ngFor="let object of finalContactsArray;">
    <td *ngFor="let key of FilteredKeys" 
      (click)="key === 'prefix' && showalert()"
      [ngStyle]="{'cursor': (key === 'prefix') ? 'pointer': 'default'}">
      {{object[key] || ' '}}
    </td>
  </tr>
</table>

只需遍历您的行并在行内遍历您的 header 键以在单元格中显示正确的行属性，并为每一列创建单元格，而不管实际 object 包含。如果该列没有值，我的示例将单个 space 作为占位符，但您可以放置任何您想要的内容，这完全取决于您的要求，但是您需要为每一列创建单元格，无论是否object 是否有属性，否则单元格永远不会正确对齐。

如何根据 json objects in Angular 6 中的 headers 序列显示 table 行数据？

How to display table row data based on headers sequence from json objects in Angular 6?

html

json

angular

angular5

angular6