Angular2パイプを使用してJSONオブジェクト値を取得できません。

Question

私はAngular2を使用して動的テーブルを作成しています。私は2つのパイプを持つangle2コンポーネントを作成しました：最初のパイプはJSONオブジェクトからのキーを取得します（完全に動作しています）。私は[object Object]ですが、値ではありません。この質問が重複した場合は申し訳ありませんが、WEB内の他のソリューションを見つけることができませんので、この問題を解決するために助けてください。

以下は私ですあなたの参照のためのコード

app.component.ts

import { Component } from '@angular/core'; 
    @Component({ 
     selector: 'app-root', 
     templateUrl: './app.component.html', 
     styleUrls: ['./app.component.css'] 
    }) 

    export class AppComponent { 
     rowData=[ 
     {"Sno":"1","Particulars":"Test","Amount":"1000"}, 
     {"Sno":"2","Particulars":"Sample","Amount":"10000"} 
     ]; 
    } 

Pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({ name: 'getjsoncolKeys' }) 
export class KeysPipe implements PipeTransform { 
    transform(value, args: string[]): any { 
    let keys = []; 
    for (var i = 0; i < value.length; i++) { 
     for (let key in value[i]) { 
     if (keys.indexOf(key) === -1) { 
      keys.push(key); 
     } 
     } 
    } 
    return keys; 
    } 
} 

@Pipe({ name: 'getjsonvalues' }) 
export class getjsonValues implements PipeTransform { 
    transform(value, args:string[]) : any { 

    let values = []; 
    for(var i=0; i<value.length;i++){ 
     for (let key in value) { 
     values.push(value[key]); 
    } 
    } 
    return values; 
    } 
} 

app.component.html

<table> 
    <tr> 
    <th *ngFor='let column of rowData | getjsoncolKeys'>{{column}}</th> 
    </tr> 
    <tr> 
    <td *ngFor='let row of rowData | getjsonvalues'>{{row}}</td> 
    </tr> 
</table> 

Answer 1

rowDataの使用方法が間違っています。

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

@Pipe({ name: 'getjsonvalues' }) 
export class ValuesPipe implements PipeTransform { 
    transform(value, args:string[]) : any { 
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values 
    // return Object.values(value); 

    // Pipe from Günter !! 
    let keys = Object.keys(value); 
    console.log(keys.map(k => value[k])); 
    return keys.map(k => value[k]); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
    </div> 

    <table> 
     <tr> 
     <!-- use first element to get the keys --> 
     <th *ngFor='let column of rowData[0] | getjsoncolKeys'>{{column}}</th> 
     </tr> 
     <!-- iterate through all elemnts --> 
     <tr *ngFor="let row of rowData"> 
     <td *ngFor='let val of row | getjsonvalues'>{{val}}</td> 
     </tr> 
    </table> 
    `, 
}) 
export class App { 
    name:string; 

    rowData = [ 
    {"Sno":"1","Particulars":"Test","Amount":"1000"}, 
    {"Sno":"2","Particulars":"Sample","Amount":"10000"} 
    ]; 

    constructor() { 
    this.name = 'Angular2' 
    } 
} 

私のライブデモを参照してください：https://plnkr.co/edit/VvxBShlYAvGt8nf9XC0K?p=preview

Answer 2

私は値パイプがキーパイプのようなものではなく、値に

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({ name: 'getjsoncolvalues' }) 
export class getjsonValues implements PipeTransform { 
    transform(value): any { 
    let keys = Object.keys(value); 
    console.log(keys.map(k => value[k])); 
    return keys.map(k => value[k]); 
    } 
} 

を返すべきだと思います

または実験を使用するhttps://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Object/values