我对Angular非常陌生。我在Angular上有一些工作。
我需要通过调用Rest Api为来自服务器的Json
数据绑定嵌套下拉列表。
数据具有一个属性LgLevel
,指定组层次结构中的级别。父母将具有level=0
,立即数Child=1
,Grandchild=2
等。 Child
和Grandchild
具有ParentLocationGroup
字段,该字段显示在哪个父菜单,子菜单中。
这是我的json
数据。我有大量数据,但没有全部显示。
{
"ArrayOfLocationGroup": {
"LocationGroup": [
{
"Id": "628",
"Name": "TEST1",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources"
},
"ParentLocationGroup": {
"_uuid": "bdce4396-9c60-4831-90f2-6f793becb362",
"__text": "570"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "0"
}
},
{
"Id": "630",
"Name": "TEST2",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "PAM-TEST"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "631",
"Name": "TEST3",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "PAA-TEST"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "697",
"Name": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "TEST4"
},
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "PAE-TEST"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "700",
"Name": "TEST5",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "cuba"
},
"ParentLocationGroup": {
"_uuid": "704af4cf-9feb-4f1b-aa00-d1c7926f7901",
"__text": "694"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "2"
}
},
{
"Id": "706",
"Name": "TEST5",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "VOIP-Test"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "718",
"Name": "TEST7",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "719",
"Name": "TEST8",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "MEM_RS"
},
"ParentLocationGroup": {
"_uuid": "52073e2b-48b5-41a9-9c2b-d793835cf285",
"__text": "718"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "2"
}
},
{
"Id": "752",
"Name": "TEST9",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "ELDIT"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "753",
"Name": "TEST10",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "GXYA"
},
"ParentLocationGroup": {
"_uuid": "52073e2b-48b5-41a9-9c2b-d793835cf285",
"__text": "718"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "2"
}
},
{
"Id": "760",
"Name": "TEST11",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "STAGE2"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "761",
"Name": "TEST12",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "INIT"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
},
{
"Id": "762",
"Name": "TEST13",
"GroupId": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "USIT"
},
"ParentLocationGroup": {
"_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
"__text": "628"
},
"LgLevel": {
"_xmlns": "http://www.air-watch.com/servicemodel/resources",
"__text": "1"
}
}
],
"_xmlns:xsd": "http://www.w3.org/2001/XMLSchema"
}
}
我已经尝试过开发它,但是我在bootstrap
文件中发现了带有静态数据的html
的所有示例,而在我看来,这是一个复杂的单独的CSS
文件。
我想使用TypeScript
动态地执行此操作。我如何开始进行这项工作。
Edit1:
当我使用来自服务的原始数据时,低于op
Dropdown
GEOIS-LEO-TEST
仅获得父项最多的记录,但根据您的代码,调试时所有变量均被值填充。这是我的代码
ngOnInit() {
this.employeeService.getGroups().subscribe((dataG:any) => {
console.log("groups "+dataG);
this.sampleData=dataG;
this.getData();
});
}
groupBy(xs, key) {
return xs.reduce(function (rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
}
getData() {
this.locGroup = this.sampleData ;
var formattedList = [];
console.log(this.sampleData);
this.locGroup.forEach(element => {
var obj = {
"Id": element.Id,
"Name": element.Name,
"GroupId": element.GroupId,
"ParentLocationGroup": element.ParentLocationGroup,
"LgLevel": element.LgLevel,
"Child" : []
}
formattedList.push(obj);
});
console.log("flist "+ formattedList);
var groupDataList = this.groupBy(formattedList, "LgLevel");
var parents = groupDataList[0];
var child = groupDataList[1];
var childOfChild = groupDataList[2];
child.forEach(c => {
c.Child = childOfChild.filter(x => x.ParentLocationGroup == c.Id);
})
parents.forEach(item => {
item.Child = child.filter(x => x.ParentLocationGroup == item.Id);
})
this.model = parents;
}
这些是我要反序列化json
的模型类>
export interface LocationGroup { Id: string; Uuid: string; Name: string; GroupId: string; LocationGroupType: string; Country: string; Locale: string; ParentLocationGroup: string; CreatedOn: string; LgLevel: string; Users: string; Admins: string; Devices: string; } export interface ArrayOfLocationGroup { LocationGroup: LocationGroup[]; }
在这里您可以找到我的jsonhttps://textuploader.com/16fty
我对Angular非常陌生。我在Angular上有一些工作。我需要通过调用Rest Api为来自服务器的Json数据绑定嵌套下拉列表。数据具有一个属性LgLevel,...
这是一个示例编码,您需要根据json数据中的嵌套级别数据进行编码。现在,您可以使用model