Angular2：嵌套* ngFor造成'防爆pression有人检查后已更改“ [英] Angular2: Nested *ngFor resulting in 'Expression has changed after it was checked'

问题描述

我有一个angular2组件'我的树我用我的父母我的应用分量。
我的应用是如下：

I have an angular2 component 'my-tree' which I am using in my parent 'my-app' component. 'my-app' is as below:

@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 is 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;

}

在此执行，控制台登录与下面的错误 -
防爆pression'getSubNodes（节点）的应用程序@ 2：15'这是检查后发生了变化。 previous值：'2.0.0,1.4.2。当前值：2.0.0,1.4.2

When this is executed, the console is logged with following errors - Expression 'getSubNodes(node) in App@2:15' has changed after it was checked. Previous value: '2.0.0,1.4.2'. Current value: '2.0.0,1.4.2'.

请参阅此普拉克实际code

See this plunk for actual code.

在我的code的想法是创建一个树（只是一个例子），第一个层次是来自一个数组（硬codeD值），第二级从返回下一集的功能来定从第一电平的当前节点（或值）。
并且它检查后的这个函数，其中角抱怨为前pression通话被改变。虽然值报告完全一样，因为它前面的错误信息了。
我搜索了这个错误的SO，发现一些参考，但主要是他们提出来调用变化检测。我无法理解为什么这是必需的，以及如何做到这一点。我也看过，这仅仅是一个诊断消息，并没有在生产模式下抛出。

The idea in my code is to create a tree( just an example), the first levels come from an array(hard coded values), the second level come from a function that returns the next set given the current node(or value) from the first level. And its the call to this function where angular complains for the expression being changed after it was checked. Though the value is reported exactly same as it was earlier in the error message. I searched for this error on SO, and found few references, but mostly they suggest to invoke change detection. I am unable to understand why this is required and also how to do that. I also read that this is a diagnostic message only and it is not thrown in production mode.

是没可能给* ngFor中调用一个函数？应该做些什么来摆脱这个错误的？

Is it not possible to call a function within an *ngFor? What should be done to get rid of this error?

推荐答案

问题是

 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'];
    }    
  }  

在这里每次角检查它得到一个新的数组实例的值，因此它们绝不相同。角不比较值的数组的唯一实例平等的。

here each time Angular checks the value it gets a new array instance, thus they are never the same. Angular doesn't compare the values only instance equality of the array.

此检查也只是在开发模式下完成的。
参见<一个href=\"http://stackoverflow.com/questions/34868810/what-is-diff-between-production-and-development-mode-in-angular2\">What是生产和发展模式之间的差异在angular2

This check is also only done in development mode. See also What is diff between production and development mode in angular2

此角的方式应该满足

 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 typeScript;
    }
    if ( node === 'js' ) {
      return js;
    }    
  }  

这篇关于Angular2：嵌套* ngFor造成'防爆pression有人检查后已更改“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！