mat-tab

时间:2020-09-17 14:23:30

标签: angular angular-material

我有一个带有mat-tab-group的父组件,该组件具有多个选项卡。每个选项卡的内容都是一个子组件,该子组件具有一些静态数据和一些位于mat-table中的动态数据。 Tab的内容(子组件)已急切加载。

父组件负责在子组件更新其数据时进行同步。通过将observable传递给每秒发出值的子组件来完成;在此标记上,子组件与API联系以获取其表的新数据。 API是可以正常工作的标准OData API。

这是组件的组织方式:

<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>

下面是图片的外观: This is how table looks before switching to another tab

问题: 选项卡“详细信息”具有3行的表格。然后,用户将选项卡切换到“错误”或“日志”,并停留在那里一秒钟以上(因此所有子组件都将更新其数据),然后返回到“详细信息”。该标签上的表格显示了所有原始行(其中3行)以及新API调用返回的每一行(再说3条)-总共6条。但是,新行应完全替换旧行。

当我查看表的数据源时,只有3个新行(不是全部显示6行)。每行中的Mat-tooltips,mat-animations,mat-button等仅适用于3个新行(而不适用于3个原始行),好像mat-table不知道旧行仍然存在(呈现)。 / p>

This is how table looks after switching to another tab and going back

带圆圈的蓝色是“旧”行,在该行上垫工具提示,行点击和垫动画无效。带圆圈的红色是“新”行,完全按预期工作。 有谁知道为什么会这样吗?故障排除技巧也将不胜感激。不幸的是,我无法在stackblitz中重现相同的行为。

0 个答案:

没有答案