Angular Material CSS不适用于首次加载

Question

我想在Angular应用的标题中显示如下的头像（在子文件夹core/header/header.component.html中的组件中）：

<span *ngIf="user?.photoURL">
    <img mat-card-avatar src="{{user.photoURL}}" alt="Avatar">
</span>

  

AppMaterialModule导入到app.module.ts

第一次加载时，头像样式不会被应用（图片会完全显示），但是一旦我开始在应用中导航，该样式就会应用于图片（无论我进入哪个页面）。

有什么主意吗？

Answer 1

解决这个问题；您正在使用它的组件需要有一个 mat-card 元素或需要包裹在其中。添加一张空的垫卡与在带有 display: none 的一侧添加一张相同！

<mat-card> your avatar html </mat-card>

或

<mat-card></mat-card> 在其他地方的同一组件 html 中。