web-dev-qa-db-ja.com

Angular ngForを使用した動的テーブル

JSONデータからダイナミックHTMLテーブルを作成できるかどうかを知りたいです。列とヘッダーの量は、JSONのキーに従って変更する必要があります。たとえば、このJSONは次のテーブルを作成する必要があります。

{
     color: "green", code: "#JSH810"
 }

 ,
 {
     color: "red", code: "#HF59LD"
 }

 ...

enter image description here

そして、このJSONはこのテーブルを作成するはずです：

{
    id: "1", type: "bus", make: "VW", color: "white"
}

,
{
    id: "2", type: "taxi", make: "BMW", color: "blue"
}

...

enter image description here

ただし、これは100％動的でなければなりません。何百もの異なるJSONオブジェクトを表示したいので、HTMLページに何もハードコーディングしないでください。

htmlangularngfor
6
Frank

オブジェクトのキーをテーブルのヘッドとして取得する場合は、 カスタムパイプ を作成する必要があります。

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

Update：または、単に Object.keys（） を使用してキーを返します。 （ デモ ）

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    return Object.keys(value);
  }
}

今あなたのhtmlテンプレートに：

<table>
  <thead>
    <tr>           
      <th *ngFor="let head of items[0] | keys">{{head}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of items">           
      <td *ngFor="let list of item | keys">{{item[list]}}</td>
    </tr>
  </tbody>
</table>

更新：これは デモ です。

20
Radonirina Maminiaina

これは役立ちます：

export class AppComponent {
 //Array of any value
  jsonData:any = [
    {id: "1", type: "bus", make: "VW", color: "white"},
    {id: "2", type: "taxi", make: "BMW", color: "blue"}
  ];
  _object = Object;
}
<div>
  <table border="1">
    <thead>
      <tr>
        <th *ngFor="let header of _object.keys(jsonData[0]); let i = index">{{header}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of jsonData; let i = index">
        <th *ngFor="let objKey of _object.keys(row); let j = index">{{ row[objKey] }} </th>
      </tr>
    </tbody>
  </table>
</div>
1
Sachink