typescript 如何在C#中从目录文件创建Angular 树视图[已关闭]

jgwigjjp  于 2022-11-18  发布在  TypeScript
关注(0)|答案(1)|浏览(68)

已关闭。此问题需要更多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);
      });
  }
gjmwrych

gjmwrych1#

在Angular模板中,使用ngFor directive迭代this.tableJSon2属性,并根据迭代时获得的JSON属性显示组件。
如果该属性有子属性,则它是文件夹,因此显示一个表示文件夹的组件,然后该组件将递归检查其子属性。如果JSON属性没有子属性,则它是文件,因此显示一个表示文件的组件。
这样你就可以得到一个树状结构,其中的组件在组件中示例化,然后正确地设置所有组件的样式。

DirectoryComponent
   FileComponent
   DirectoryComponent
      DirectoryComponent
         FileComponent
      FileComponent
      FileComponent
FileComponent
FileComponent

相关问题