如何使用Angular4 * ngFor创建数据表? [英] How can I use Angular4 *ngFor to create a data table?

问题描述

我正在使用Angular4从API获取数据并使用* ngFor渲染数据表的项目中.因为我仍然有更多具有相同结构的aip，所以我想使用(键，值)对来显示它们.在AngularJS中，我已经正确地呈现了这样的表格:

I am working on a project using Angular4 to get data from an API and using*ngFor to render a data table. Because I still have more aips with same structure, I want to use (key, value) pair to display them. In AngularJS, I have correctly rendered the table like this:

<!--This is Good in AngularJS-->
 <table>
    <thead>
        <tr>
            <th ng-repeat="(key, value) in data.items[0]"> {{key}}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr  ng-repeat ="data in data.items >
        <td ng-repeat="(key,value) in data">{{ value }}</td>           
        </tr>
    </tbody>
</table>

但是，该表未在Angular4中正确显示.来自API的原始json数据显示如下:

However, the table doesn't show in Angular4 correctly. The original json data from API shows like:

{
    items: [
    {
        status: "Sold - Payment Received",
        count: 30,
        loans: 8,
        dl_loans: 8,
        avg_available: 149.5,
        min: 28,
        max: 346,
        principal: 13452.37,
        closed: 0,
        chrg_of_balance: 0,
        final_balance: 0
    },
    {
        status: "At Auction - Awaiting Info",
        count: 4,
        loans: 4,
        dl_loans: 4,
        avg_available: 70.45,
        min: 36,
        max: 102,
        principal: 11727.8,
        closed: 0,
        chrg_of_balance: 0,
        final_balance: 0
    },
    ...
}

这是我的app.component.ts:

Here is my app.component.ts:

ngOnInit(): void {
    this.dataService.getData().subscribe(
      (data) => {
        this.data = data.items;
        this.titles = data.items[0];
      }
    );
}

我为过滤键和值创建了一个pip.ts:

I have created a pip.ts for filter key and value:

import { PipeTransform, Pipe } from '@angular/core';
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

在Angular4 HTML中:

In Angular4 HTML:

<!--This is Bad in Angular4-->
<table>
 <thead align="center">
     <tr>
         <th *ngFor = "let item of titles | keys"> 
           {{item.key}}
         </th>
     </tr>
 </thead>
 <tbody>
     <tr>
      <td *ngFor = "let item of data | keys "> 
        {{item.value | json }}
      </td>           
     </tr>
 </tbody>
</table>

但是，UI中的thead显示正常，但是tbody部分显示了包括整个对象(部分):

However the thead in UI shows fine, but the tbody part shows including the whole object (partly):

    status 
---------------------------------------
{
    status: "Sold - Payment Received",
    count: 30,
    loans: 8,
    dl_loans: 8,
    avg_available: 149.5,
    min: 28,
    max: 346,
    principal: 13452.37,
    closed: 0,
    chrg_of_balance: 0,
    final_balance: 0
 }
--------------------------------------

任何人都知道如何正确呈现此表?谢谢你！

Anyone knows how can I render this table correctly? Thank you in advanced!

推荐答案

使用其他管道代替您正在使用的管道，这只会返回对象的键

Use a different pipe instead of what you are using that will just return the keys of your object

import { PipeTransform, Pipe } from '@angular/core'; 
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push(key);
    }
    return keys;
  }
}

您应将模板代码更改为

<thead align="center">
    <tr>
        <th *ngFor = "let item of titles | keys"> 
            {{item}}
        </th>
    </tr>
</thead>
<tbody>
    <tr *ngFor = "let item of data ">
        <td *ngFor = "let key of item | keys " > 
            {{item[key]}}
        </td>
    </tr>
</tbody>

这应该可以解决问题

这篇关于如何使用Angular4 * ngFor创建数据表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！