ฉันใหม่กับแองกูลาร์ ฉันทำงานเกี่ยวกับ Angular แล้ว
ฉันต้องการผูกรายการดร็อปดาวน์แบบซ้อนสำหรับJson
ข้อมูลที่มาจากเซิร์ฟเวอร์โดยการเรียก Rest Api
ข้อมูลมีหนึ่งคุณลักษณะ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
ผมต้องการที่จะทำแบบไดนามิกโดยใช้ ฉันจะเริ่มทำงานกับมันได้อย่างไร
html
รหัสที่มีรายการซ้อนอยู่คงที่ ฉันจะพยายามแก้ไขและจะโพสต์Json
ข้อมูล คุณจะไม่ชอบสิ่งที่ฉันได้ลอง :)
html
ไฟล์ ฉันมีความคิดที่จะเริ่มต้น คุณสามารถช่วยฉันออก
XML
JSON
คุณสามารถเพิ่มสิ่งที่คุณได้ลองด้วยหรือไม่ อาจมีรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการที่คุณใช้