时间戳

首页 > 解决方案 > 在加载视图之前从 api 加载数据

angular - 在加载视图之前从 api 加载数据

问题描述

我有简单的手风琴：

HTML

<div *ngFor="let item of showDirNames | async | filter: name; let i = index;">
   <button class="accordion" (click)="toggleAccordion($event, i, item.name)"> {{item.name}} </button>
   <div class="panel" hide="!item.isActive">
      <p *ngFor="let child of showFilesNames | async | filter: name"> {{child.name}} </p>
   </div>
</div>

TS

    toggleAccordion(event, index, item) {
      this.activeIndex = index;
      var element = event.target;
      
      if(element.classList.toggle("active")){
        this.showFiles(item);
      }

      if(this.element[index].isActive) {
        this.element[index].isActive = false;
      } else {
        this.element[index].isActive = true;
      }
      var panel = element.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
  }

还有我如何获取数据

showFiles(filename: string) 
{
    this.showFilesNames = this.uploadService.getFiles(filename);
    this.showFilesNames.forEach(element => {});
}

它应该看起来如何？我想单击手风琴的标题，它给了我标题，然后这个标题发送到我的后端，然后后端给我文件名。问题是我的视图是在数据出现之前加载的。

标签： angulartypescript

解决方案

我会继续<ng-container *ngIf="showFileNames | async as fileNames">等待，直到变量有数据。然后循环<p *ngFor="let fileName of fileNames | filter : name>"。有了这个，你可以实现我想要的。

推荐阅读