json - 无法使用 angular2 管道获取 JSON 对象值

Question

我正在使用 Angular2 创建一个动态表。我创建了一个带有 2 个管道的 angular2 组件:第一个管道从用作表列的 JSON 对象获取 key (工作正常)，而第二个管道必须从 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