2017-03-16 71 views
0

我想用typeScript + Angular2构建一个简单的递归树。 当我到了第二级节点显示一秒钟然后消失,我想一些事件正在清洗我的收藏,但我无法弄清楚哪一个。 这是我的代码:递归树,节点正在消失

@Component({ 
 
    
 
    selector: 'sp-item-template', 
 
    template: 
 
    ` {{CurrItem.Title}} 
 
     <div *ngIf="CurrItem.subItems"> 
 
     <ul> 
 
      <li *ngFor="let item of CurrItem.subItems" (click)="folderClick(item)">       
 
       <sp-item-template [CurrItem] = "item" ></sp-item-template> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    ` 
 
// templateUrl:'./sp-lists.component.html' 
 
}) 
 

 
export class SpItemTemplate 
 
{ 
 
    @Input() CurrItem:SpItem; 
 
    private listsService: SpListService 
 
    constructor(@Inject(SpListService) list_service: SpListService){this.listsService = list_service;} 
 

 
    private folderClick(item: SpItem) 
 
    { 
 
     item.setListService(this.listsService); 
 
     item.GetSubFolders(item.ParentWebRelativeUrl); 
 
    } 
 
}

import { Component, Inject } from '@angular/core'; 
 
import {SpListService} from './sp-list.service' 
 

 
export class SpItem 
 
{ 
 
    Title: string; 
 
    Id: string; 
 
    Name:string; 
 
    RelativeUrl:string; 
 
    Type:string; 
 
    ParentWebRelativeUrl: string; 
 

 
    private subItems:SpItem[]; 
 

 
    private listsService: SpListService 
 
    constructor(@Inject(SpListService) list_service: SpListService){this.listsService = list_service;} 
 

 
    public setSpItemAsDoclib(title:string, id:string, name:string, parentWebUrl:string):void 
 
    { 
 
     this.Title = title; 
 
     this.Id = id; 
 
     this.Name = name; 
 
     this.ParentWebRelativeUrl = parentWebUrl; 
 
     this.RelativeUrl = parentWebUrl + "/" + name; 
 
    } 
 

 
    public setSpItemAsFolder(name:string, relativeUrl:string, type:string):void 
 
    { 
 
     this.Name = name; 
 
     this.Title = name; 
 
     this.RelativeUrl = relativeUrl; 
 
     this.Type = type; 
 
    } 
 

 
    public setListService(ListService:SpListService):void 
 
    { 
 
     this.listsService = ListService; 
 
    } 
 

 
    public GetSubFolders(parentWeb:string): void 
 
    { 
 
     let hostName = location.protocol + '//' + location.host; 
 
     //this.listsService.getFolders(hostName + "/"+ this.ParentWebRelativeUrl +"/_api/web/GetFolderByServerRelativeUrl('" + this.RelativeUrl +"')/folders") 
 
     this.listsService.getFolders(hostName + "/"+ parentWeb +"/_api/web/GetFolderByServerRelativeUrl('" + this.RelativeUrl +"')/folders") 
 
     .then(listRslt => 
 
     { 
 
      for (let item of listRslt) 
 
      { 
 
       item.ParentWebRelativeUrl = parentWeb; 
 
      } 
 
      this.subItems = listRslt 
 
     }); 
 
    } 
 
}

+0

你可以添加一个工作的蹲点展示发生了什么?很难直观地看到什么得到了渲染 –

+0

我没有看到在掠夺者angular2选项。我可以向你发送代码吗? –

回答

0

找到了problom:我缺少的,如果检查,如果节点有儿童。 不知道为什么它没有裁决的儿童,但增加了这一点,如果解决问题。

private folderClick(item: SpItem) 
    { 
    item.setListService(this.listsService); 
    item.setGlobalService(this.globalService); 

    **if(item.subItems == null)** 
    { 
     item.GetSubFolders(item.ParentWebRelativeUrl); 
    }  
    item.GetDocuments(item.ParentWebRelativeUrl); 
    }