*ngFor Angular 通过具有不同键和级别的嵌套数组
*ngFor Angular through nested array with different keys and level
我有一个具有“非对称”结构的对象数组,其中键不相同并且有一些嵌套对象。
我需要遍历这个:
obj = [{
"d14042018": {
"date": "14-04-2018",
"value": 5
},
"d02042018": {
"date": "02-04-2018",
"value": 10
},
"name": "my name"
},
{
"d14042018": {
"date": "14-04-2018",
"value": 15
},
"d02042018": {
"date": "02-04-2018",
"value": 25
},
"name": "my second name"
}]
我需要的是return这样的结构
第一行=我的名字5 10
第二行 = 我的第二个名字 15 25
我在自定义管道中尝试了 for...
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'keys'
})
export class KeysPipe implements PipeTransform {
transform(value: any, args?: any): any {
let keys: string;
if (value) {
for (var prop in value) {
if(typeof value[prop] != 'object') {
keys = value[prop];
} else {
for (var subprop in prop) {
keys = prop.subprop;
}
}
}
}
return keys;
}
}
但是 id 不起作用...
有人可以帮忙吗?
我建议避免使用 Pipe 进行这种类型的高级数据操作,而只是在 ngOnInit()
或绑定到 [= 之前为 display/usage 生成必要的数据结构33=]变量。您可以将 Object.keys()
与 Array.prototype.map()
、Array.prototype.join()
和三元语句结合使用来生成数据行。
打字稿:
this.rows = Object.keys(obj).map(key => {
const o = this.data[key];
const { name } = o;
const values = Object.keys(o)
.map(k => o[k]['value'])
.join(' ');
return { name, values };
});
HTML:
<ul>
<li *ngFor="let row of rows">{{row.name}} {{row.values}}</li>
</ul>
这是一个 example 的动作。
希望对您有所帮助!
一个选项是将每个对象的键缩减为一个数组,如果您希望每个项目都是一个字符串,则只需加入即可:
const obj = [...]; // your example array
const flattened = obj.map(
o => Object.keys(o).reduce(
(acc,cur) => cur === 'name'
? [o[cur], ...acc] // key is 'name', push value to first
: [...acc, o[cur].value] // other than name, push value of value last
, []).join(' ')
);
我有一个具有“非对称”结构的对象数组,其中键不相同并且有一些嵌套对象。 我需要遍历这个:
obj = [{
"d14042018": {
"date": "14-04-2018",
"value": 5
},
"d02042018": {
"date": "02-04-2018",
"value": 10
},
"name": "my name"
},
{
"d14042018": {
"date": "14-04-2018",
"value": 15
},
"d02042018": {
"date": "02-04-2018",
"value": 25
},
"name": "my second name"
}]
我需要的是return这样的结构
第一行=我的名字5 10
第二行 = 我的第二个名字 15 25
我在自定义管道中尝试了 for...
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'keys'
})
export class KeysPipe implements PipeTransform {
transform(value: any, args?: any): any {
let keys: string;
if (value) {
for (var prop in value) {
if(typeof value[prop] != 'object') {
keys = value[prop];
} else {
for (var subprop in prop) {
keys = prop.subprop;
}
}
}
}
return keys;
}
}
但是 id 不起作用...
有人可以帮忙吗?
我建议避免使用 Pipe 进行这种类型的高级数据操作,而只是在 ngOnInit()
或绑定到 [= 之前为 display/usage 生成必要的数据结构33=]变量。您可以将 Object.keys()
与 Array.prototype.map()
、Array.prototype.join()
和三元语句结合使用来生成数据行。
打字稿:
this.rows = Object.keys(obj).map(key => {
const o = this.data[key];
const { name } = o;
const values = Object.keys(o)
.map(k => o[k]['value'])
.join(' ');
return { name, values };
});
HTML:
<ul>
<li *ngFor="let row of rows">{{row.name}} {{row.values}}</li>
</ul>
这是一个 example 的动作。
希望对您有所帮助!
一个选项是将每个对象的键缩减为一个数组,如果您希望每个项目都是一个字符串,则只需加入即可:
const obj = [...]; // your example array
const flattened = obj.map(
o => Object.keys(o).reduce(
(acc,cur) => cur === 'name'
? [o[cur], ...acc] // key is 'name', push value to first
: [...acc, o[cur].value] // other than name, push value of value last
, []).join(' ')
);