我正在开发一个项目，我将数据从json文件加载到可嵌套列表视图，因为我希望从API动态加载数据。
{
"demo1": [{
"id": 1,
"content": "<div> General </div>"
},
{
"id": 4,
"content": " Security ",
"children" :[{
"id":5,
"content" : "Password"
},
{
"id":6,
"content" : "System Idle"
},
{
"id":7,
"content" : "Login"
}]
},
{
"id": 8,
"content": " Evaluations "
},
{
"id" :9,
"content" : "Reports"
}
],
"Password": [
{
"id": 11,
"content": "Expiry Interval"},
{
"id": 12,
"content": " Expire Password Now <input class =\"pull-right\" type=\"checkbox\" name=\"checkbox-inline\">"
},
{
"id": 13,
"content": " Days to Password Expiry <div _ngcontent-xtu-75=\"\" class=\"pull-right\" style=\"width : 200px\"><div _ngcontent-xtu-75=\"\" ng-reflect-sa-jqui-slider=\"[object Object]\" class=\"ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content\"><span tabindex=\"0\" class=\"ui-slider-handle ui-corner-all ui-state-default\" style=\"left: 0%;\"></span></div></div>"
},
{
"id": 14,
"content": "<div> Days to expire email reminder link <on-off-switch></on-off-switch></div>"
},
{
"id": 15,
"content": "<div class=\"settings-element clearfix\"><p class=\"pull-left\">New password should not be same as old password</p><div class=\"pull-right\"><on-off-switch></on-off-switch></div></div>"
},
{
"id": 16,
"content": " Allow user to change password <div class=\"pull-right onoffswitch-container\"><span class=\"onoffswitch-title\"><ng-content></ng-content><\/span><span class=\"onoffswitch\"><input type=\"checkbox\" class=\"onoffswitch-checkbox\" [(ngModel=\"value\" [checked]=\"value\"(ngModelChange)=\"onChange()\" id=\"{{widgetId}}\"/> <label class=\"onoffswitch-label\" htmlFor=\"{{widgetId}}\"><span class=\"onoffswitch-inner\" data-swchon-text=\"ON\"data-swchoff-text=\"OFF\"></span><span class=\"onoffswitch-switch\"><\/span><\/label><\/span><\/div>"
},
{
"id": 17,
"content": " Force user to change password after first login <div class=\"pull-right onoffswitch-container\"><span class=\"onoffswitch-title\"><ng-content></ng-content><\/span><span class=\"onoffswitch\"><input type=\"checkbox\" class=\"onoffswitch-checkbox\" [(ngModel=\"value\" [checked]=\"value\"(ngModelChange)=\"onChange()\" id=\"{{widgetId}}\"/> <label class=\"onoffswitch-label\" htmlFor=\"{{widgetId}}\"><span class=\"onoffswitch-inner\" data-swchon-text=\"ON\"data-swchoff-text=\"OFF\"></span><span class=\"onoffswitch-switch\"><\/span><\/label><\/span><\/div>"
},
{
"id": 18,
"content": " Force user to enter new password twice <div class=\"pull-right onoffswitch-container\"><span class=\"onoffswitch-title\"><ng-content></ng-content><\/span><span class=\"onoffswitch\"><input type=\"checkbox\" class=\"onoffswitch-checkbox\" [(ngModel=\"value\" [checked]=\"value\"(ngModelChange)=\"onChange()\" id=\"{{widgetId}}\"/> <label class=\"onoffswitch-label\" htmlFor=\"{{widgetId}}\"><span class=\"onoffswitch-inner\" data-swchon-text=\"ON\"data-swchoff-text=\"OFF\"></span><span class=\"onoffswitch-switch\"><\/span><\/label><\/span><\/div>"
},
{
"id": 19,
"content": " Force password rules <div class=\"pull-right onoffswitch-container\"><span class=\"onoffswitch-title\"><ng-content></ng-content><\/span><span class=\"onoffswitch\"><input type=\"checkbox\" class=\"onoffswitch-checkbox\" [(ngModel=\"value\" [checked]=\"value\"(ngModelChange)=\"onChange()\" id=\"{{widgetId}}\"/> <label class=\"onoffswitch-label\" htmlFor=\"{{widgetId}}\"><span class=\"onoffswitch-inner\" data-swchon-text=\"ON\"data-swchoff-text=\"OFF\"></span><span class=\"onoffswitch-switch\"><\/span><\/label><\/span><\/div>"
},
{
"id": 20,
"content": " Maximum length "
},
{
"id": 21,
"content": " Minimum length "
},
{
"id": 22,
"content": " Must contain Uppercase characters (A-Z)"
},
{
"id": 23,
"content": " Must contain Digits (0-9) "
},
{
"id": 24,
"content": " Must contain Special characters "
},
{
"id": 25,
"content": " Apply Password rules to role "
},
{
"id": 26,
"content": " Maintain history of password validation "
},
{
"id": 27,
"content": " Number of passwords to maintain in history "
}
],
"Login": [{
"id": 33,
"content": " Restrict number of failed passcode attempts "
},
{
"id": 34,
"content": " Maximum failed passcode attempts "
},
{
"id": 35,
"content": " Password retry attempt time limit "
},
{
"id": 36,
"content": " Account lockout threshold "
},
{
"id": 37,
"content": " Allow lockout threshold "
},
{
"id": 38,
"content": " Allow user to login to multiple devices "
}
],
"Reports" : [{
"id": 41,
"content" : "Risk Threshold"
}],
"General" : [{
"id" : 42,
"content" : "Logo"
},
{
"id" : 43,
"content" : "Title to appear in place of company name"
},
{
"id" : 44,
"content" : "Default Language "
},
{
"id" : 45,
"content" : "Allow Notfications to be sent out automatically"
},
{
"id": 46,
"content" : "Timezone"
}
],
"System Idle" :[{
"id" : 47,
"content" : "Logout user after x minutes if idle"
}],
"Evaluations": [{
"id":48,
"content" :"No of days for Due Date"
},
{
"id" : "49",
"content" : "Allow ducplicate "
},
{
"id" : "50",
"content" : "Allow custom choice sets "
}
]
}
我在json文件中将HTML5元素作为字符串。但是当我在json文件中附加角度选择器时，元素不会在视图中呈现。
这是我的component.ts文件代码：
import { Component, OnInit } from '@angular/core';
import {JsonApiService} from "../../shared/api/json-api.service";
@Component({
selector: 'sa-settings',
templateUrl: 'new.settings.component.html',
styleUrls: ['new.settings.component.css']
})
export class NewSettingsComponent implements OnInit {
public demo1: any;
public totalData: any;
public demo2: any;
public nestable2DemoOutput: any;
public demo3: any;
public nestableOutput: any;
public demoString:string;
constructor(private jsonApiService:JsonApiService) { }
ngOnInit() {
this.jsonApiService.fetch('/ui-examples/settings-list.json').subscribe(data=> {
this.demo1 = data.demo1;
this.demo3 = data.demo3;
this.totalData = data;
})
}
public onChange(payload){
this.nestableOutput = payload
}
public onClick(event:any,string:string){
}
public showSelected(event){
this.demo2 = [];
while(document.getElementById("settings").firstChild.firstChild) {
document.getElementById("settings").firstChild.removeChild(document.getElementById("settings").firstChild.firstChild);
}
this.demoString = event.target.innerText;
this.demo2 = this.totalData[event.target.innerText];
}
}
这是我的component.html文件代码：
<div id="content">
<div class="row">
<sa-big-breadcrumbs [items]="['Administration', 'Application Settings']" icon="wrench" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
</div>
<!--
The ID "widget-grid" will start to initialize all widgets below
You do not need to use widgets if you dont want to. Simply remove
the <section></section> and you can use wells or panels instead
-->
<!-- widget grid -->
<sa-widgets-grid>
<!-- row -->
<div class="row">
<!-- NEW WIDGET START -->
<article class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<!-- Widget ID (each widget will need unique ID)-->
<sa-widget [colorbutton]="false" [editbutton]="false" [collapsed]="false" [deletebutton]="false" [fullscreenbutton]="false" color="darken">
<header>
<span class="widget-icon"> <i class="fa fa-cog"></i> </span>
<h2>Settings</h2>
</header>
<!-- widget div-->
<div>
<!-- widget content -->
<div class="widget-body">
<!-- this is what the user will see -->
<div class="widget-body" id="newTemplate">
<sa-setting
(click)="showSelected($event)"
[items]="demo1"
(change)="onChange($event)"
[options]="{ group: 2 }">
</sa-setting>
</div>
</div>
<!-- end widget content -->
</div>
<!-- end widget div -->
</sa-widget>
<!-- end widget -->
</article>
<!-- WIDGET END -->
<!-- NEW WIDGET START -->
<article class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<!-- Widget ID (each widget will need unique ID)-->
<sa-widget [colorbutton]="false" [editbutton]="false" [deletebutton]="false" [fullscreenbutton]="false" color="darken">
<!-- widget options:
usage: <sa-widget id="wid-id-0" [editbutton]="false">
[colorbutton]="false"
[editbutton]="false"
[togglebutton]="false"
[deletebutton]="false"
[fullscreenbutton]="false"
[custombutton]="false"
[collapsed]="true"
[sortable]="false"
-->
<header>
<span class="widget-icon"> <i class="fa fa-arrows-v"></i> </span>
<h2 class="font-md">{{demoString}}</h2>
</header>
<!-- widget div-->
<div>
<!-- widget content -->
<div class="widget-body">
<sa-setting id="settings"
[items]="demo2"
(change)="onChange($event)"
[options]="{ group: 2 }">
</sa-setting>
</div>
<!-- end widget content -->
</div>
<!-- end widget div -->
</sa-widget>
<!-- end widget -->
</article>
<!-- WIDGET END -->
</div>
<!-- end row -->
<!-- row -->
<div class="row">
<!-- a blank row to get started -->
<div class="col-sm-12">
<!-- your contents here -->
</div>
</div>
<!-- end row -->
</sa-widgets-grid>
<!-- end widget grid -->
</div>
请帮我解决这个问题。