Значки угловых материалов не видны после заполнения значений

Question

Я использую этот пример HTML для создания некоторых папок:

<mat-grid-list cols="8" rowHeight="100px" fxFlex>

  <mat-grid-tile *ngFor="let element of fileElements" class=file-or-folder>
    <span [matMenuTriggerFor]="rootMenu" 
          [matMenuTriggerData]="{element: element}" 
          #menuTrigger="matMenuTrigger">
    </span>
    <div  fxLayout="column" 
          fxLayoutAlign="space-between center" 
          (click)="navigate(element)" 
          (contextmenu)="openMenu($event, menuTrigger)">

      <mat-icon color="primary" 
                class="file-or-folder-icon pointer" 
                *ngIf="element.isFolder">
        folder
      </mat-icon>
      <mat-icon color="primary" 
                class="file-or-folder-icon pointer" 
                *ngIf="!element.isFolder">
        insert_drive_file
      </mat-icon>

      <span>{{element.name}}</span>
    </div>
  </mat-grid-tile>
</mat-grid-list>

И для их заполнения у меня есть список объектов, которым я присваиваю значения после вызова http get запроса.

Мой фактический код компонента:

 .subscribe((data:any) => {
      this.fileElements = data;
  }, 
  error => console.log(error),
  () => { console.log(Completed fetching), 
        this.fileElements.forEach(....);
   }
 }

И я ожидаю увидеть для каждого элемента папку в браузере. У меня есть приведенный выше код внутри метода ngOnInit (). Я предполагаю, что, поскольку он асинхронный, когда он находится в заполненном разделе, возможно, список еще не заполнен. Любые идеи о том, как я могу иметь их в порядке?

Answer 1

Я столкнулся с той же проблемой при использовании * ngIf с mat-icon.

Попробуйте вместо свойства display * ngIf.

  <mat-icon color="primary" 
                class="file-or-folder-icon pointer" 
                [style.display]="element.isFolder ? 'block':'none'">
        folder
      </mat-icon>