Angular async data

Question

i'm trying to get data from my api, the code for getting datas :

getList() {
    this.fileList = [];

    this._globalService.getUserFiles(this.userId)
      .then(files => {
        files.forEach(retFile => {
          this._globalService.getFileActions(retFile._id)
            .then(retActions => {
              this.fileList.push( {
                file: retFile,
                action: retActions
              });
            });
        });
      })
      .finally(() => {
        this.finish = true;
      });
  }

Call OnInit hook. After, my view is trying to show same that :

<ng-container *ngIf="finish; else wait">
      <ng-container *ngIf="fileList.length; else noItems">
        <li *ngFor="let item of fileList">
         ...
        </li>
      <ng-container>
      <ng-template #noItems>
        <span class="noItems">Any file</span>
      </ng-template>
<ng-container>

That works fine. But my problem lasts a few seconds the #noItems template is to show when datas exists, like in this example :

starbugs · Accepted Answer · 2020-01-18 18:12:53Z

1

You always push your result into this.FileList, you this.FileList never empty, therefore your noItem template never show up.

answered Jan 18, 2020 at 18:12

starbugs

7051 gold badge6 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lucas Arama Over a year ago

The array is emptied at init with this line : this.fileList = [];

Lucas Arama Over a year ago

The problem it's: when array is not empty (like my gif example) the #noItems template is show, his should not

Collectives™ on Stack Overflow

Angular async data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related