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

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>