Question

我正在使用Angular2创建动态表。我创建了一个带有2个管道的angular2组件：第一个管道从JSON对象获取密钥，该对象用作表的列（完美地工作），而第二个管道必须从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

我认为值管道应该像键管道一样，而是返回值

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

Answer 2

您的问题是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

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

2 个答案: