无法使用 angular2 管道获取 JSON 对象值
Unable to get JSON Object value using angular2 pipe
我正在使用 Angular2 创建动态 table。我创建了一个带有 2 个管道的 angular2 组件:第一个管道从 JSON 对象获取密钥,该对象用作 table 的列(完美运行),而第二个管道必须从 JSON object (not working) 我得到的结果是 [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>
我认为值管道应该像键管道一样,但 return 值
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
您的问题是 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 创建动态 table。我创建了一个带有 2 个管道的 angular2 组件:第一个管道从 JSON 对象获取密钥,该对象用作 table 的列(完美运行),而第二个管道必须从 JSON object (not working) 我得到的结果是 [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>
我认为值管道应该像键管道一样,但 return 值
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
您的问题是 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