ngFor中的Angular2组件抛出错误（viewFactory不是函数）

Question

我在Angular 2 app（beta 1）中有一个ComponentB。 它完全正常，直到我将它放在ComponentA中的ngFor循环中。 我收到了相当神秘的错误：

EXCEPTION：TypeError：viewFactory_ComponentB0不是[ComponentA @ 1：23中的数字]中的函数BrowserDomAdapter.logError @ angular2.dev.js：22690BrowserDomAdapter.logGroup @ angular2.dev.js：22701ExceptionHandler.call @ angular2.dev.js：1163 （匿名函数）@ angular2.dev.js：12416NgZone._notifyOnError @ angular2.dev.js：13324collection_1.StringMapWrapper.merge.onError @ angular2.dev.js：13228run @ angular2-polyfills.js：141（匿名函数）@ angular2 .dev.js：13247NgZone.run @ angular2.dev.js：13209（匿名函数）@ angular2.dev.js：12499schedulerFn @ angular2.dev.js:12742tryCatcher @ Rx.js:31Subscriber.next @ Rx.js:9500Subject ._next @ Rx.js：9999Subject.next @ Rx.js：9963EventEmitter.emit @ angular2.dev.js：12723（匿名函数）@ angular2.dev.js：13140run @ angular2-polyfills.js：138NgZone._notifyOnTurnDone @ angular2 .dev.js：13139（匿名函数）@ angular2.dev.js：13254zoneBoundFn @ angular2-polyfills.js：111lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js：1305 angular2.dev。 js：22690 ORIGINAL EXCEPTION：TypeError：viewFactory_ComponentB0不是functionBrowserDomAdapter.logError @ angular2.dev.js：22690ExceptionHandler.call @ angular2.dev.js：1172（匿名函数）@ angular2.dev.js：12416NgZone._notifyOnError @ angular2。 dev.js：13324collection_1.StringMapWrapper.merge.onError @ angular2.dev.js：13228run @ angular2-polyfills.js：141（匿名函数）@ angular2.dev.js：13247NgZone.run @ angular2.dev.js：13209（匿名函数）@ angular2.dev.js：12499schedulerFn @ angular2.dev.js:12742tryCatcher @ Rx.js:31Subscriber.next @ Rx.js:9500Subject._next @ Rx.js:9999Subject.next @ Rx.js:9963EventEmitter。 emit @ angular2.dev.js：12723（匿名函数）@ angular2.dev.js：13140run @ angular2-polyfills.js：138NgZone._notifyOnTurnDone @ angular2.dev.js：13139（匿名函数）@ angular2.dev.js： 13254zoneBoundFn @ angular2-polyfills.js：111lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js：1305 angular2.dev.js：22690 ORIGINAL STACKTRACE：BrowserDomAdapter.logError @ angula r2.dev.js：22690ExceptionHandler.call @ angular2.dev.js：1175（匿名函数）@ angular2.dev.js：12416NgZone._notifyOnError @ angular2.dev.js：13324collection_1.StringMapWrapper.merge.onError @ angular2.dev。 js：13228run @ angular2-polyfills.js：141（匿名函数）@ angular2.dev.js：13247NgZone.run @ angular2.dev.js：13209（匿名函数）@ angular2.dev.js：12499schedulerFn @ angular2.dev。 js：12742tryCatcher @ Rx.js:31Subscriber.next @ Rx.js:9500Subject._next @ Rx.js:9999Subject.next @ Rx.js:9963EventEmitter.emit @ angular2.dev.js:12723(anonymous function）@ angular2。 dev.js：13140run @ angular2-polyfills.js：138NgZone._notifyOnTurnDone @ angular2.dev.js：13139（匿名函数）@ angular2.dev.js：13254zoneBoundFn @ angular2-polyfills.js：111lib $ es6 $ promise $ asap $ $ flush @ angular2-polyfills.js：1305 angular2.dev.js：22690 TypeError：viewFactory_ComponentB0不是AppViewManager_.Compateory上的AppElement.viewFactory_ComponentA1 [as embeddedViewFactory]（viewFactory_ComponentA：388）的函数 mbeddedViewInContainer（angular2.dev.js：9185）位于NgFor._applyChanges（angular2.dev.js：14567）的NgFor._bulkInsert（angular2.dev.js：14608）的ViewContainerRef_.createEmbeddedView（angular2.dev.js：5890）处NgFor.ngDoCheck（angular2.dev.js：14552）在AbstractChangeDetector.ChangeDetector_ComponentA_0.detectChangesInRecordsInternal（viewFactory_ComponentA：45）的AbstractChangeDetector.detectChangesInRecords（angular2.dev.js：7825）处的AbstractChangeDetector.runDetectChanges（angular2.dev.js：7808）at at AbstractChangeDetector._detectChangesInViewChildren（angular2.dev.js：7892）

ComponentA：

@Component({
  selector: 'component-a'
  , directives: [
    FORM_DIRECTIVES
    , ComponentB
  ]
  , template: `
    <!-- works --><component-b [(ngFormControl)]="_formControl"></component-b>
    <!-- fails --><component-b *ngFor="#number of numbers" [(ngFormControl)]="_formControls[number]"></component-b>
  `
})

export class ComponentA {}

任何提示/帮助高度赞赏。

Answer 1

正如@TylerDurden所说

此错误消息由循环检测中引入的错误产生（请参阅＃6404 ）。

已经有一个主人（见＃6474 ）的修复程序尚未发布。 这肯定会在beta.2。

建议降级到beta.0，直到暴风雨结束。

更新

此问题已在beta.2中修复（缩小问题仍然存在）。 有关详细信息，请参阅changelog 。

Answer 2

这个问题真的解决了吗？ 我正在研究“beta 0”并且以下代码对我有用，但是在更新文件时，beta 2仍然给出了与此帖相同的问题。 这是我的代码：

// rowIterator.component.ts
import {Component,forwardRef} from 'angular2/core';
import {ColumIteratorComponent} from './columIterator.component';
import {ModuleIteratorComponent} from './moduleIterator.component';

@Component({
  selector: '[rowIterator]',
  template: `
    <div *ngFor="#element of rowData">
      <div columIterator *ngIf="element.column" [ngClass]="element.class" [columData]="element.column"></div>

      <div moduleIterator *ngIf="element.module" [ngClass]="element.class" [moduleData]="element.module"></div>
    </div>
    `,
  inputs: ['rowData'],
  directives: [forwardRef(function() { return ColumIteratorComponent; }),ModuleIteratorComponent]
})
export class RowIteratorComponent {
  // "rowData" is a ARRAYS
}

//columnIterator.components.ts
import {Component,forwardRef} from 'angular2/core';
import {RowIteratorComponent} from './rowIterator.component';
import {ModuleIteratorComponent} from './moduleIterator.component';

@Component({
  selector: '[columIterator]',
  template:`
    <div *ngFor="#element of columData">
      <div rowIterator *ngIf="element.row" [ngClass]="element.class" [rowData]="element.row"></div>

      <div moduleIterator *ngIf="element.module" [ngClass]="element.class" [moduleData]="element.module"></div>
    </div>
  `,
  inputs: ['columData'],
  directives: [forwardRef(function(){return RowIteratorComponent;}), ModuleIteratorComponent]
})
export class ColumIteratorComponent{
  // "columData" is a ARRAY
}

我必须分别对beta 0版本中的循环使用forwardRef(function() {return RowIteratorComponent;}函数和forwardRef(function() {return ColumIteratorComponent;})并且没有问题，但是在Versioned beta2中得到以下错误：

EXCEPTION: TypeError: viewFactory_ColumIteratorComponent0 is not a function in [element.column in RowIteratorComponent@2:25]
EXCEPTION: TypeError: viewFactory_ColumIteratorComponent0 is not a function in [element.column in RowIteratorComponent@2:25]BrowserDomAdapter.logError @ angular2.dev.js:22911BrowserDomAdapter.logGroup @ angular2.dev.js:22922ExceptionHandler.call @ angular2.dev.js:1182(anonymous function) @ angular2.dev.js:12562NgZone._notifyOnError @ angular2.dev.js:13485collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13389Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13408NgZone.run @ angular2.dev.js:13370(anonymous function) @ angular2.dev.js:12661schedulerFn @ angular2.dev.js:12904tryCatcher @ Rx.js:234Subscriber.next @ Rx.js:9703Subject._next @ Rx.js:10202Subject.next @ Rx.js:10166EventEmitter.emit @ angular2.dev.js:12885(anonymous function) @ angular2.dev.js:13301Zone.run @ angular2-polyfills.js:1243NgZone._notifyOnTurnDone @ angular2.dev.js:13300(anonymous function) @ angular2.dev.js:13415zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451(anonymous function) @ angular2-polyfills.js:123Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262
angular2.dev.js:22911 ORIGINAL EXCEPTION: TypeError: viewFactory_ColumIteratorComponent0 is not a functionBrowserDomAdapter.logError @ angular2.dev.js:22911ExceptionHandler.call @ angular2.dev.js:1191(anonymous function) @ angular2.dev.js:12562NgZone._notifyOnError @ angular2.dev.js:13485collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13389Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13408NgZone.run @ angular2.dev.js:13370(anonymous function) @ angular2.dev.js:12661schedulerFn @ angular2.dev.js:12904tryCatcher @ Rx.js:234Subscriber.next @ Rx.js:9703Subject._next @ Rx.js:10202Subject.next @ Rx.js:10166EventEmitter.emit @ angular2.dev.js:12885(anonymous function) @ angular2.dev.js:13301Zone.run @ angular2-polyfills.js:1243NgZone._notifyOnTurnDone @ angular2.dev.js:13300(anonymous function) @ angular2.dev.js:13415zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451(anonymous function) @ angular2-polyfills.js:123Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262
angular2.dev.js:22911 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:22911ExceptionHandler.call @ angular2.dev.js:1194(anonymous function) @ angular2.dev.js:12562NgZone._notifyOnError @ angular2.dev.js:13485collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13389Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13408NgZone.run @ angular2.dev.js:13370(anonymous function) @ angular2.dev.js:12661schedulerFn @ angular2.dev.js:12904tryCatcher @ Rx.js:234Subscriber.next @ Rx.js:9703Subject._next @ Rx.js:10202Subject.next @ Rx.js:10166EventEmitter.emit @ angular2.dev.js:12885(anonymous function) @ angular2.dev.js:13301Zone.run @ angular2-polyfills.js:1243NgZone._notifyOnTurnDone @ angular2.dev.js:13300(anonymous function) @ angular2.dev.js:13415zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451(anonymous function) @ angular2-polyfills.js:123Zone.run @ angular2-polyfills.js:1243zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262
angular2.dev.js:22911 TypeError: viewFactory_ColumIteratorComponent0 is not a function...