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

Question

我在 Angular 2 应用程序（测试版 1）中有一个 ComponentB。在我将它放在 ComponentA 的 ngFor 循环中之前，它工作得很好。我收到相当神秘的错误：

EXCEPTION: TypeError: viewFactory_ComponentB0 is not a function in [numbers in ComponentA@1:23]BrowserDomAdapter.logError @ angular2.dev.js:22690BrowserDomAdapter.logGroup @ angular2.dev.js:22701ExceptionHandler.call @ angular2.dev.js:1163(anonymous function) @ angular2.dev.js:12416NgZone._notifyOnError @ angular2.dev.js:13324collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13228run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:13247NgZone.run @ angular2.dev.js:13209(anonymous function) @ 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(anonymous function) @ 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 is not a functionBrowserDomAdapter.logError @ angular2.dev.js:22690ExceptionHandler.call @ angular2.dev.js:1172(anonymous function) @ angular2.dev.js:12416NgZone._notifyOnError @ angular2.dev.js:13324collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13228run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:13247NgZone.run @ angular2.dev.js:13209(anonymous function) @ 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(anonymous function) @ angular2.dev.js:13254zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305 angular2.dev.js:22690 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:22690ExceptionHandler.call @ angular2.dev.js:1175(anonymous function) @ angular2.dev.js:12416NgZone._notifyOnError @ angular2.dev.js:13324collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13228run @ angular2-polyfills.js:141(anonymous function) @ angular2.dev.js:13247NgZone.run @ angular2.dev.js:13209(anonymous function) @ 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(anonymous function) @ angular2.dev.js:13254zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @ angular2-polyfills.js:1305 angular2.dev.js:22690 TypeError: viewFactory_ComponentB0 is not a function at AppElement.viewFactory_ComponentA1 [as embeddedViewFactory] (viewFactory_ComponentA:388) at AppViewManager_.createEmbeddedViewInContainer (angular2.dev.js:9185) at ViewContainerRef_.createEmbeddedView (angular2.dev.js:5890) at NgFor._bulkInsert (angular2.dev.js:14608) at NgFor._applyChanges (angular2.dev.js:14567) at NgFor.ngDoCheck (angular2.dev.js:14552) at AbstractChangeDetector.ChangeDetector_ComponentA_0.detectChangesInRecordsInternal (viewFactory_ComponentA:45) at AbstractChangeDetector.detectChangesInRecords (angular2.dev.js:7825) at AbstractChangeDetector.runDetectChanges (angular2.dev.js:7808) at AbstractChangeDetector._detectChangesInViewChildren (angular2.dev.js:7892)

组件A：

@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 {}

任何 hints/help 高度赞赏。

Answer 1

正如@TylerDurden 所建议的

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

master 中已有修复程序（请参阅 #6474）尚未发布。这肯定会在 beta.2 中。

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

更新

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

Answer 2

这个问题真的解决了吗？我正在研究 "beta 0"，下面的代码对我有用，但是当更新文件时，beta 2 仍然给我带来与 post 相同的问题。这是我的代码：

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

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

Angular2 Component inside ngFor throws Error (viewFactory is not a function)

javascript

angular2-template

angular

更新