* ngFor angular 2 when creating tabs - the expression has changed after checking it

Question

I use the tab project described here: tabs Project

Everything else except my problem works fine. The only thing that does not work for me is currently being applied *ngForwhen creating tabs.

I know that checking phase 2 with angular detects changes, and right, tabs can be added during phase 2 checking.

What I want to do is try and still make it work, it’s very important for me to use it *ngForin the selector tabs.

Plunker code is provided to demonstrate the crash and what I'm trying to achieve.

Plunger code

It’s important to say that I looked at

• Here

and I understand that this is only in debug mode and what the respondent said, although that was a year ago.

• Almost the same answer still doesn't help

• Ugly work

Additionally

Unlike Plunker, which can run code with errors in the console (which explains the problem), I can’t even switch tabs in my project, but this is normal behavior, I don’t want bad code.

Unfortunately, I can’t share my real code because it is mainly for my work, but I can provide more data if necessary, although it is based on almost 100% of Plunker and the project that I presented at the beginning of the problem. .

Answer 1

"" setTimeout ( )

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

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

Answer 2

, ngAfterContentInit(). :

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

, , , DOM , ngAfterContentInit() CD, tab.active DOM.

* ngFor, . - :

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

EDIT: , ( ). plunkr