Angular2: Nested * ngFor as a result: "Expression changed after checking it"

Question

I have an angular2 component 'my-tree' which I use in my parent my-app component. "my-app" is as follows:

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <my-tree *ngFor="#node of nodes" [title]="node">
      <my-tree *ngFor="#subNode of getSubNodes(node)" [title]="subNode">
      </my-tree>
    </my-tree>  
  `,
  directives: [MyTree]
})
export class App {
  constructor() {
    this.nodes = ['Angular2', 'typescript', 'js']    
  }

  getSubNodes( node: string ) {
    if( node === 'Angular2') {
      return ['2.0.0', '1.4.2']
    }
    if ( node === 'typescript' ) {
      return ['1.7.3'];
    }
    if ( node === 'js' ) {
      return ['es-6'];
    }    
  }  
}

my-tree - a simple component -

@Component({
  selector: 'my-tree',
  providers: [],
  inputs: ['title'],
  template: `
    <ul>
      <li><span>{{title}}</span></li>
      <ng-content></ng-content>
    </ul>
  `,
  directives: []
})
export class MyTree {
    private title: string;

}

When this is done, the console logs with the following errors: The expression 'getSubNodes (node) in the @ 2: 15 application' has changed after checking it. Previous value: "2.0.0.1.4.2". Current value: '2.0.0.1.4.2'.

See plunk for the actual code.

, ( ), ( ), - , , node ( ) . , angular . , . SO , . , , . , , .

* ngFor? , ?

Answer 1

 getSubNodes( node: string ) {
    if( node === 'Angular2') {
      return ['2.0.0', '1.4.2']
    }
    if ( node === 'typescript' ) {
      return ['1.7.3'];
    }
    if ( node === 'js' ) {
      return ['es-6'];
    }    
  }  

Angular , , , . Angular .

. . Angular2?

Angular

 angular2 = ['2.0.0', '1.4.2'];
 typeScript = ['1.7.3'];
 js = ['es-6'];

 getSubNodes( node: string ) {
    if( node === 'Angular2') {
      return this.angular2;
    }
    if ( node === 'typescript' ) {
      return this.typeScript;
    }
    if ( node === 'js' ) {
      return this.js;
    }    
  }  

Answer 2

, getSubNodes(node) idempontent, .

:

. , , , .  
....

Angular idempotent ​​ , .

JavaScript. idempotent , . ( ), .

Angular , , , . Angular , - , , , - , I.e. , , , - , /.

, , .