已关闭。此问题需要更多focused。当前不接受答案。
**想要改进此问题吗?**更新问题,使其仅关注editing this post的一个问题。
昨天关门了。
Improve this question
我想创建一个树视图从系统文件与父母文件夹在Angular 的第一步我得到的目录文件在C#和发送到Angular 现在我想显示这个目录在树视图在Angular
C#程式码:
[HttpGet]
[Route("direcrotyfile")]
public ActionResult<string> Get()
{
int i = 0;
List<directoryclass> dclist = new List<directoryclass>();
string[] allfiles = Directory.GetFiles("f:/directorytest", "*.*", SearchOption.AllDirectories);
foreach (var file in allfiles)
{
directoryclass dc = new directoryclass();
FileInfo info = new FileInfo(file);
i = i + 1;
dc.code = i;
dc.directory = info.DirectoryName.ToString();
dc.name = info.Name.ToString();
dclist.Add(dc);
}
var json = JsonConvert.SerializeObject(dclist);
return json;
}
Angular 代码TS:
ngOnInit(): void {
this.backendService.Get().subscribe(result=>{
this.tableJSon2 =result;
this.stringifiedData2 = JSON.stringify(this.tableJSon2);
this.Table_JS_Data2 = JSON.parse(this.stringifiedData2);
console.log( this.Table_JS_Data2 );
type MyArrayType = Array<{parent: any, child1: any,child2:any}>;
var arr: MyArrayType = [ ];
for(let dir of this.Table_JS_Data2)
{
this.splited =dir.directory.split("\\", 20)
arr.push( {parent: this.splited[1], child1: this.splited[2],child2:this.splited[3]})
}
this.arr=arr
console.log(this.arr);
});
}
1条答案
按热度按时间gjmwrych1#
在Angular模板中,使用ngFor directive迭代
this.tableJSon2
属性,并根据迭代时获得的JSON属性显示组件。如果该属性有子属性,则它是文件夹,因此显示一个表示文件夹的组件,然后该组件将递归检查其子属性。如果JSON属性没有子属性,则它是文件,因此显示一个表示文件的组件。
这样你就可以得到一个树状结构,其中的组件在组件中示例化,然后正确地设置所有组件的样式。