无法使用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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |