Angular mat卡头像在初始页面加载时未正确呈现

我有一个简单的mat卡头像布局，在我的应用程序的许多页面的标题中显示一个圆形图标。我发现在很多页面上，但不是所有页面上，即使使用相同类型的代码，也无法在初始渲染过程中正确渲染mat card化身

我正在使用以下代码：

家 欢迎{{user.userName} 在第一次渲染ie时，通过完全浏览器刷新，预期的圆形图标将显示为方形：

如果我随后导航到另一个具有相同布局样式的视图，则卡头像将正确渲染，如果随后导航回原始视图：

真正奇怪的是，我在很多页面上使用了相同的基本布局，在一些页面上，这与描述的一样失败，而在另一些页面上，这是可行的。其他大多数做工作的人往往更复杂

我怀疑这是一个时间问题，但我看过代码并尝试过移动包含，但这些都没有任何效果。另外，可能与这种情况相反的是，图标显示的原色也来自于样式，因此一定要应用一些材质样式

在调试器中查看呈现的HTML，我看不出呈现的HTML有什么不同——无论以何种方式呈现，都是相同的HTML标记、类和样式，这确实很奇怪

---

有没有人遇到过这种情况，或者对可能导致这种情况的原因和解决方法提出了什么建议？

看起来问题在于实际组件中缺少元素。这就是为什么有些页面没有显示该行为，而有些页面显示该行为

如果我把上面的代码包装成一个块，它就会工作。但仅仅是页面上的一个空白就可以让这一切顺利进行

这是丑陋的，但它的工作：

家 欢迎{{user.userName} 您还可以添加以下内容：

这将解决树中下面所有组件的此问题

---

所有这些都是丑陋的，可能是非设计行为，因此最好不要在mat卡之外使用mat卡头像，但在紧要关头，这会起作用。

您是否通过chrome工具检查过每种情况下的CSS？它必须是一个额外的样式，当它呈现为正方形时应用。是的，完全相同。我猜这是因为样式可能还没有出现，因为它们是外部加载的；这会提高你的声誉：我知道——在别人有机会回答可能更好的答案之前，我总是犹豫着标记自己的答案……这至少帮了我一把，thanx Rick！