Question

我正在尝试从文件夹树中获取文件。看起来像那样。

我的第一个电话返回2个文件夹，分别是subfolder和subfolder2。但是在for循环结束后，它不会再进行另一个调用以带来subfolder3文件夹。如何获得子文件夹3？

getForms(folderName: string): Observable<IFolder> {
const url = `${this.serviceURL}Library/Forms And Information/` + folderName;
return this.httpClient.get<IFolder>(url).pipe(map(response => {
  response.SubFolders.forEach(function (s) {   
      this.getForms(folderName + "" + s.FolderName);  
  }.bind(this));
  this.forms.next(<IFolder>response);
  localStorage.setItem('currentForms', JSON.stringify(this.forms.getValue()));
  return <IFolder>response;
}));
}

Answer 1

我找到了解决方案。我先获取所有文件夹，然后创建树。

//this is my service class.

export class PolicyService extends HttpService {
public forms = new BehaviorSubject<IFolder[]>(null);
formList = this.forms.asObservable();
public folderTree: IFolder[] = [];

  getForms(folderName: string) {
  let promise = new Promise((resolve, reject) => {
  let apiURL = `${this.serviceURL}Forms/` + folderName;
  this.httpClient.get<IFolder>(apiURL).toPromise().then((response) => { // Success
    this.folderTree.push(response);
    response.SubFolders.forEach(function (s) {
      this.getForms(folderName + "/" + s.FolderName);
    }.bind(this));
    this.forms.next(this.folderTree);
    localStorage.setItem('currentForms', JSON.stringify(this.forms.getValue()));
    return <IFolder>response;
  });
});
return promise;
}

我的文件夹位于folderTree数组中。然后创建树。

  export class FormsComponent extends BaseComponent implements OnInit  {
  folders: IFolder[];
  folderTree: IFolder[];
  constructor(
  private titleService: Title,
  private policyService: PolicyService) { super(); }

  ngOnInit(): void {
  this.titleService.setTitle("Forms");
  this.policyService.formList.subscribe(p => this.folders = p);
  this.folderTree = this.getDataByParentId(this.folders, 7);
}
getDataByParentId(data, parent) {
const result = data
  .filter(d => d.ParentFolderID === parent);
    if (!result && !result.length) {
     return null;
}
return result.map(({ FolderID, FolderName, Files }) =>
  ({ FolderID, FolderName, Files, SubFolders: this.getDataByParentId(data, FolderID) 
 }))
}  
}

这是html

      <div class="col-lg-5 col-md-6 homeHeader pr-lg-5" style="color:#595959" *ngFor="let subFolder of folderTree[0].SubFolders">
    <div class="pb-3">{{subFolder.FolderName}}</div>
    <div *ngFor="let innerSubFolders of subFolder.SubFolders; let isFirst = first; let isLast= last;" style="margin-bottom:1px">
      <div (click)="headerClicked($event)" class="accordionHeaderBC" [class.accordionTopBorder]="isFirst" [class.accordionBottomBorder]="isLast">
        <span class="circle plus"></span>
        <span class="accordionHeaderText">{{innerSubFolders.FolderName}}</span>
      </div>
      <div class="hideDiv">
        <div class="accordionBodyBC py-3" *ngFor="let file of innerSubFolders.Files" style="margin-bottom:1px">
          <a download href="{{file.FilePath}}" style="color:#ffffff;text-decoration:none" target="_blank">
            <div class="row align-items-center">
              <div class="col-2 pr-0 pl-4" style="margin-left:42px">
                <img class="img-fluid" src="../../assets/pdf2.png" />
              </div>
              <div class="col-8"> {{file.FileName}} </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>

角度7中的递归http调用

1 个答案: