填充值后，角度材质图标不可见

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

当使用带有mat-icon的* ngIf时，我遇到了同样的问题。

请尝试使用display属性* ngIf。

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