*ngFor angular 2 创建选项卡时 - 检查后表达式已更改

Question

我正在使用此处说明的选项卡项目：Tabs Project

除我的问题外，其他一切都完美无缺。目前唯一对我不起作用的是在创建标签时应用 *ngFor。

我知道 angular 进行的第二阶段检查会检测到更改，他是对的，在进行第二阶段检查时可能会添加选项卡。

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

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

重要的是，我调查过

而且我知道它仅在调试模式下以及回答者所说的内容，尽管那是一年前的事了。

另外

不像 Plunker 能够运行控制台中的错误代码（这就是问题的解释），我什至不能在我的项目中切换标签，但这是正常行为，我不想要坏代码。

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

Answer 1

一个解决方案是用 setTimeout 包装您的 "zone" 代码（其他手动触发更改检测的方法也可以）

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

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

编辑：似乎您也可以使用 first local variable (haven't tried it). See this plunkr

*ngFor angular 2 when creating tabs - Expression has changed after it was checked