* ng创建标签时的角度2 - 表达式在检查后发生了变化

Question

我正在使用此处说明的标签项目：Tabs Project

除了我的问题之外的其他所有问题都非常有效。 目前唯一不起作用的是在创建标签时应用*ngFor。

我知道通过角度进行的第二阶段检查会发现变化，而他是对的，在第二阶段检查正在进行时，标签可能会添加。

我想要做的是尽量让它工作，在*ngFor选择器中使用tabs对我来说非常重要。

提供了一个Plunker代码，用于演示崩溃以及我正在尝试实现的目标。

Plunker Code

重要的是，我调查了

• Here

我明白这只是在调试模式和回答者所说的内容，尽管是在一年前。

• Almost the same answer, still not helpful

• An ugly work around

另外

与能够在控制台中运行错误代码的Plunker（这是问题的解释）不同，我甚至无法在项目中切换选项卡，但这是正常的行为，我不想要错误的代码。

不幸的是，我无法分享我的真实代码，因为它基本上用于我的工作，但是如果需要我可以提供更多数据，尽管它几乎100％来自Plunker和我在问题开始时提供的项目。

Answer 1

一种解决方案是使用setTimeout包装“区域”代码（手动触发更改检测的其他方法也可以使用）

if(activeTabs.length === 0) {
      setTimeout(()=>{
        this.selectTab(this.tabs.first);
      },0);
}

Full plunker：https://plnkr.co/edit/UVfiJFYexgua2HfPe0Lw?p=preview

Answer 2

为了解决此问题，您需要从ngAfterContentInit（）方法中删除用于将第一个选项卡设置为活动的代码。此代码导致问题：

if(activeTabs.length === 0) {
  this.selectTab(this.tabs.first);
}

我认为错误会弹出，因为更改检测要求DOM在一次运行后稳定，而您在ngAfterContentInit（）中的调用需要CD的通过传递以反映DOM中的新tab.active值。 / p>

您可以做的是将* ngFor中的第一个元素设置为默认处于活动状态。类似的东西：

<tab *ngFor="let item of ['1','2']"; let index = index" [active]="index == 0"...

编辑：似乎你也可以使用first local variable（避难所试过）。见plunkr