我对 Angular 很陌生。我有一些关于 Angular 的工作。
我需要为 Json
绑定(bind)嵌套下拉列表通过调用 Rest Api 来自服务器的数据。
数据具有一个属性级别,指定组层次结构中的级别。家长
将有立即Child=1
, Grandchild=2
等等。 Child
和 Grandchild
有 Group 字段,它显示在哪个父菜单中,子菜单将在那里。
我已经尝试过开发,但我找到了 bootstrap
的所有示例静态数据在 html
文件并分开 CSS
对我来说很复杂的文件。
我想使用 TypeScript
动态执行此操作.我怎样才能开始研究它。
最佳答案
这是一个编码示例,您需要根据 json 数据中的嵌套级别数据进行编码。现在你可以 for 循环 格式化 使用 在 DOM 中创建 json 数据型号 数据。
我希望这会帮助你创建一个多级下拉菜单
groupBy(xs, key) {
return xs.reduce(function (rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
}
var model;
getData() {
var sampleData = {
"ArrayOfLocationGroup": {
"LocationGroup": [
...
...//Server response data
],
"_xmlns:xsd": "http://www.w3.org/2001/XMLSchema"
}
}
var list = this.sampleData["ArrayOfLocationGroup"]["LocationGroup"];
var formattedList = [];
list.forEach(element => {
var obj = { //Make sure your server response data to like this structure
"Id": element.Id,
"Name": element.Name,
"GroupId": element.GroupId.__text,
"ParentLocationGroup": element.ParentLocationGroup.__text,
"LgLevel": element.LgLevel.__text,
"Child" : []
}
formattedList.push(obj);
});
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(p => {
p.Child = child.filter(x => x.ParentLocationGroup == p.Id);
})
this.model = parents;
}
html文件
<ul class="nav site-nav">
<li class=flyout>
<a href=#>Dropdown</a>
<!-- Flyout -->
<ul class="flyout-content nav stacked">
<li *ngFor="let parent of model" [class.flyout-alt]="parent.Child.length > 0"><a href=#>{{parent.Name}}</a>
<ul *ngIf="parent.Child.length > 0" class="flyout-content nav stacked">
<li *ngFor="let c of parent.Child" [class.flyout-alt]="c.Child.length > 0"><a href=#>{{c.Name}}</a>
<ul *ngIf="c.Child.length > 0" class="flyout-content nav stacked">
<li *ngFor="let cc of c.Child" [class.flyout-alt]="cc.Child.length > 0"><a href=#>{{cc.Name}}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
根据您的服务器响应数据组织模型数据。
响应 json 格式已更改 ( __text 到 #text )
var obj = {
"Id": element.Id,
"Name": element.Name && element.Name.#text ? element.Name.#text : element.Name,
"GroupId": element.GroupId && element.GroupId.#text ? element.GroupId.#text : element.GroupId,
"ParentLocationGroup": element.ParentLocationGroup && element.ParentLocationGroup.#text ? element.ParentLocationGroup.#text : element.ParentLocationGroup,
"LgLevel": element.LgLevel && element.LgLevel.#text ? element.LgLevel.#text : element.LgLevel,
"Child" : []
}
关于html - 如何创建下拉列表并绑定(bind)来自服务器的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60318600/