mat-card-avatar在初始页面加载时无法正确呈现

Question

我有一个简单的mat-card-avatar布局，该布局在我的应用程序中许多页面的标题中显示一个圆形的图标。我发现在许多页面上（即使使用相同类型的代码也并非全部）在初始渲染过程中无法正确渲染 SELECT distinct CAST( YEAR([DATE]) AS varchar) + '-' + CAST( month([DATE]) AS varchar) AS 'YM', year([DATE])as 'Y',MONTH([DATE]) as 'M' FROM randomTable WHERE [DATE] IS NOT NULL order by Y,M 。

我正在使用以下代码：

mat-card-avatar

在第一次渲染（即使用完整的浏览器刷新）时，预期的圆角图标显示为正方形样式：

如果然后我导航到另一个具有相同布局样式<h1 fxLayout="row"> <div mat-card-avatar class="header-icon"> <mat-icon>home</mat-icon> </div> Welcome {{ user.userName }} </h1> 的视图，则可以正确渲染，就像随后导航回原始视图一样：

真正奇怪的是，我在许多页面上使用相同的基本布局，但在某些页面上却无法正常运行，而在其他页面上却可以正常工作。大部分其他可行的方法往往更复杂。

我怀疑这是一个计时问题，但是我看了一下代码并尝试过移动包含，但没有任何作用。同样可能的情况是，该图标显示的是原色，该原色也来自样式-因此一定要应用某些材料样式。

在调试器中查看呈现的HTML，我发现呈现的HTML没有什么区别-相同的HTML标记，类和样式都以其呈现的方式呈现，这确实很奇怪。

是否有人遇到过此问题或有关可能导致此问题的任何建议以及任何变通办法？

Answer 1

看起来问题出在实际组件中缺少<mat-card>元素。这就是为什么某些页面没有显示行为而其他页面却显示行为的原因。

如果我将上面的代码包装到<mat-card>块中，它将起作用。但是页面上只有一个空白的<mat-card>甚至可以完成这项工作。

这很丑陋，但是可行：

<mat-card style="display: none"></mat-card>
<h1 fxLayout="row">
  <div mat-card-avatar class="header-icon">
    <mat-icon>home</mat-icon>
  </div>
  Welcome {{ user.userName }}
</h1>

您还可以添加以下内容：

<mat-card style="display: none"></mat-card>

到根组件，这将为树中下面的所有组件解决此问题。

所有这些都是丑陋的，而且可能是非设计的行为，因此最好不要在mat-card-avatar之外使用mat-card，但在紧要关头可以使用。