ngFor 中的 Angular2 组件抛出错误(viewFactory 不是函数) [英] Angular2 Component inside ngFor throws Error (viewFactory is not a function)

问题描述

我在 Angular 2 应用程序(测试版 1)中有一个 ComponentB.在我将它放在 ComponentA 的 ngFor 循环中之前，它工作得非常好.我收到一个相当神秘的错误:

I have a a ComponentB in a Angular 2 app (beta 1). It works perfectly fine until I place it inside a ngFor loop in ComponentA. I receive the rather cryptic error of:

EXCEPTION: TypeError: viewFactory_ComponentB0 不是 [numbers in ComponentA@1:23]BrowserDomAdapter.logError @ angular2.dev.js:22690BrowserDomAdapter.logGroup @ angular2.dev.js:22701ExceptionHandler.call @ angular2.dev 中的函数.js:1163(匿名函数)@angular2.dev.js:[e-mail]:[e-mail]:13228run@angular2-polyfill1s(函数)) @ angular2.dev.js:13247NgZone.run @ angular2.dev.js:13209(匿名函数) @ angular2.dev.js:12499schedulerFn @ angular2.dev.js:12742tryCatcher @ Rx.js:31xSubscriber.js:9500Subject._next @ Rx.js:9999Subject.next @ Rx.js:9963EventEmitter.emit @ angular2.dev.js:12723(匿名函数) @ angular2.dev.js:13140run @ angular2-polyfills.Z:138Ngone_notifyOnTurnDone @ angular2.dev.js:13139(匿名函数) @ angular2.dev.js:13254zoneBoundFn @ angular2-polyfills.js:111lib$es6$promise$asap$$flush @angular2-polyfills.js:1305angular2.dev.js:22690 原始异常:TypeError:viewFactory_ComponentB0 不是 functionBrowserDomAdapter.logError @ angular2.dev.js:22690ExceptionHandler.call @ angular2.dev.js:1172(匿名函数)@ angular2.dev.js:12_notifyOnError @ angular2.dev.js:13324collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13228run @ angular2-polyfills.js:141(匿名函数) @ angular2.dev.js:13247NgZone.dev @angular2.dev.js:13228runjs:13209(匿名函数)@angular2.dev.js:[e-mail]:[e-mail]:[e-mail]:[e-mail]:9999.xSubject.nextjs:[e-mail]:12723(匿名函数)@angular2.dev.js:[e-mail]:[e-mail]:[e-mail]:[e-mail]:111lib$es6$promise$asap$$[e-mail]:1305angular2.dev.js:22690 原始堆栈跟踪:BrowserDomAdapter.logError @ angular2.dev.js:22690ExceptionHandler.call @ angular2.dev.js:1175(匿名函数)@ angular2.dev.js:12416NgZone._notular2dev.Errorjs:[e-mail]:[e-mail]:141(匿名函数)@angular2.dev.js:[e-mail]:1320函数) @ angular2.dev.js:12499schedulerFn @ angular2.dev.js:12742tryCatcher @ Rx.js:31Subscriber.next @ Rx.js:9500Subject._next @ Rx.js:9999Subject.next @ Rx.js:9963 @EventEmitter.eangular2.dev.js:12723(匿名函数)@angular2.dev.js:[e-mail]:[e-mail]:13139(匿名函数)@@angular2.2D54n.js:angular2-polyfills.js:111lib$es6$promise$asap$$[e-mail]:1305angular2.dev.js:22690 TypeError: viewFactory_ComponentB0 不是函数在 AppElement.viewFactory_ComponentA1 [作为 EmbeddedViewFactory] ​​(viewFactory_ComponentA:388)在 AppViewManager_.createEmbeddedViewInContainer (angular2.dev.js:9185)在 ViewContainerRef_.createEmbeddedView (angular2.dev.js:5890)在 NgFor._bulkInsert (angular2.dev.js:14608)在 NgFor._applyChanges (angular2.dev.js:14567)在 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)在 AbstractChangeDetector._detectChangesInViewChildren (angular2.dev.js:7892)

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

非常感谢任何提示/帮助.

Any hints/help highly appreciated.

推荐答案

如@TylerDurden 所建议

As suggested by @TylerDurden

此错误消息是由循环检测中引入的错误产生的(请参阅 #6404).

This error message is produced by a bug introduced in cycle detection (see #6404).

master 中已经有一个修复程序(参见 #6474)尚未发布.这肯定会在 beta.2 中.

There's already a fix in master (see #6474) not yet released. This will for sure be in beta.2.

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

The recommendation is to downgrade to beta.0 until the storm is over.

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

This issue has been fixed in beta.2 (issues with minification are still there). See changelog for more details.

这篇关于ngFor 中的 Angular2 组件抛出错误(viewFactory 不是函数)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！