加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 17:51:22 所属栏目:安全 来源:网络整理
导读:我正在使用Angular2创建一个动态表.我创建了一个带有2个管道的angular2组件:第一个管道从 JSON对象获取密钥,该对象用作表的列(完美地工作),而第二个管道必须从JSON对象获取值(不工作)结果我得到的是[对象]而不是值,对不起,如果这个问题是重复的,我无法在WEB
我正在使用Angular2创建一个动态表.我创建了一个带有2个管道的angular2组件:第一个管道从 JSON对象获取密钥,该对象用作表的列(完美地工作),而第二个管道必须从JSON对象获取值(不工作)结果我得到的是[对象]而不是值,对不起,如果这个问题是重复的,我无法在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>

解决方法

你的问题是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","Amount":"10000"}
  ];

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

看我的现场演示:https://plnkr.co/edit/VvxBShlYAvGt8nf9XC0K?p=preview

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读