如何创建多级下拉列表并与来自服务器的数据绑定

问题描述 投票：6回答：1

我对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，...

html angular typescript
1个回答
0
投票

这是一个示例编码，您需要根据json数据中的嵌套级别数据进行编码。现在，您可以使用model

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.