Question

我在从JSON对象显示动态表时遇到问题。我有两个阵列。一个数组包含表的标题，其他数组包含JSON对象。问题是我希望数据按每个JSON对象的标题数组值的顺序显示（每个对象都被视为行）。我试图显示数据的代码是：

    <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中。如何摆脱这个问题？

我的工作代码：

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

只需遍历行并在行内迭代标题键以在单元格中显示正确的行属性，并为每个列创建单元格，而不管实际对象包含什么。如果没有该列的值，我的示例将单个空间作为占位符放入，但是您可以放置任何您想要的内容，所有这些都取决于您的要求，但是您需要为每个列创建单元格，无论该对象是否具有该属性或不，否则细胞永远不会正确对齐。

如何根据Angular 6中json对象的头序列显示表行数据？

1 个答案: