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

Question

我正在使用这里解释的选项卡项目： Tabs Project

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

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

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

提供了一个Plunker代码，展示了崩溃以及我正在努力实现的目标。

Plunker代码

重要的是，我调查了一下

我明白它只是在调试模式和回答者所说的，虽然它是在一年前。

此外

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

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

Answer 1

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

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

完整的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值。

相反，您可以将* ngFor中的第一个元素设置为默认处于活动状态。 就像是：

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

编辑：似乎你也可以使用第一个局部变量（没有尝试过）。 看到这个plunkr