Angular “材料”选项卡内材料表中的重复行

我有一个具有多个选项卡的mat选项卡组的父组件。每个选项卡的内容都是一个子组件，在mat表中包含一些静态数据和一些动态数据。选项卡的内容（子组件）被急切地加载

父组件负责在子组件更新其数据时进行同步。这是通过将可观测值传递给每秒发出值的子组件来实现的；在这个标记上，子组件联系API以获取其表的新数据。API是正常工作的标准ODataAPI

这就是组件的组织方式：

<mat-tab-group>
 <mat-tab label="Tab-1">
  <app-component-one [input]="observable$"></app-component-one>
 </mat-tab>
 <mat-tab label="Tab-2">
  <app-component-two [input]="observable$"></app-component-two>
 </mat-tab>
</mat-tab-group>

问题:
“详细信息”选项卡的表有3行。然后，用户将选项卡切换到“错误”或“日志”，在那里停留一秒钟以上（因此所有子组件更新其数据），然后返回到“详细信息”。该选项卡上的表显示了所有原始行（其中3行）和新API调用返回的每一行（假设还有3行）-总共6行。但是，新行应该完全替换旧行

当我查看表的数据源时，只有3个新行（并不是全部呈现的6个）。每行中的Mat工具提示、Mat动画、Mat按钮等仅在3个新行（而不是3个原始行）上工作，就好像Mat table不知道旧行仍然存在一样（渲染）


蓝色圆圈是“旧”行，在这些行上垫工具提示、行单击和垫动画不起作用。红色圆圈表示完全按照预期工作的“新”行。
有人知道为什么会这样吗？故障排除技巧也将非常感谢。不幸的是，我无法在stackblitz中重现同样的行为。
很难说您的问题是什么。您说的是标题中的重复行，然后是我们不知道的一些API调用，然后是呈现但不在数据源中的行。你能准备一场闪电战并准确地说出它到底出了什么问题吗？否则就很难帮上忙了。为了清晰起见，我编辑了。我无法使用stackblitz复制相同的问题。谢谢-现在看起来更清楚了。您的问题可能是急于加载选项卡内容。默认情况下，mat tab group会在项目不在活动选项卡中时从DOM中删除项目，以提高性能。我还没有深入研究mat表的内部，但它可能依赖于DOM中的对象。由于您是异步进行工作的，所以当表不在DOM中时，可能会发生一些更新，所以不会删除旧的行。尝试对mat选项卡内容使用延迟加载：不幸的是，由于其他一些限制，我不能使用延迟加载。