[英]What is the best way to handle an object of objects in Angular 4
Can Anyone please lead me in the correct way to handle a data structure like this :任何人都可以引导我以正确的方式处理这样的数据结构:
{
"1":{
"id":"1",
"name":"Facebook",
"created_at":"",
"updated_at":"",
"fields":{
"1":{
"id":"1",
"name":"G\u00f6rsel",
"service_id":"1",
"ord":"1",
"token":"fimage",
"type":"1",
"created_at":null,
"updated_at":null
},
"2":{
"id":"2",
"name":"Post Metini",
"service_id":"1",
"ord":"2",
"token":"ftext",
"type":"2",
"created_at":null,
"updated_at":null
},
"3":{
"id":"3",
"name":"Ba\u015fl\u0131k",
"service_id":"1",
"ord":"3",
"token":"fheader",
"type":"2",
"created_at":null,
"updated_at":null
},
"4":{
"id":"4",
"name":"Link A\u00e7\u0131klamas\u0131",
"service_id":"1",
"ord":"4",
"token":"flink_description",
"type":"2",
"created_at":null,
"updated_at":null
}
}
},
"2":{ },
"3":{ }
}
I noticed that all angular cool functions like sorting, filtering looping through data are based onto javascript arrays so what is the best approach to handle similar structures in Angular 4, for example for use in *ngFor, or using filters and so on.. for example if I try to iterate this object with NgFor I get我注意到所有 Angular 酷函数,如排序、过滤循环数据都基于 javascript 数组,那么在 Angular 4 中处理类似结构的最佳方法是什么,例如用于 *ngFor,或使用过滤器等等......例如,如果我尝试使用 NgFor 迭代这个对象,我会得到
Error: Cannot find a differ supporting object '[object Object]' of type 'object'.错误:找不到类型为“object”的不同支持对象“[object Object]”。 NgFor only supports binding to Iterables such as Arrays. NgFor 仅支持绑定到可迭代对象,例如数组。
at this point I do not know what action is best, I can ofcurse convert the object to an array, but is that my best approach?在这一点上我不知道什么动作最好,我可以将对象转换为数组,但这是我最好的方法吗?
I think the structure could be improved.我认为结构可以改进。 It is a better option to use an array of objects under "fields".在“字段”下使用对象数组是更好的选择。 Then you would be able to loop through that array.然后你就可以遍历该数组。
For anyone who may encounter a similar question, based on @ ThomasSablik comment and after taking his advise about using Pipes to handle it, I could find the suitable approach I was looking for, and I'm currently using the following pipe which is working like a charm对于任何可能遇到类似问题的人,基于@ ThomasSablik 的评论,并在听取了他关于使用 Pipes 处理它的建议后,我可以找到我正在寻找的合适方法,我目前正在使用以下管道,它的工作原理如下魅力
export class KeyValuesPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
Thanks to Thomas for putting me on the right direction.感谢 Thomas 为我指明了正确的方向。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.