Angular2 Thành phần bên trong ngFor ném Lỗi (viewFactory không phải là hàm)

Question

Tôi có một ComponentB trong ứng dụng Góc 2 (beta 1). Nó hoạt động hoàn toàn tốt cho đến khi tôi đặt nó bên trong vòng lặp ngFor trong ComponentA. Tôi nhận được lỗi khá khó hiểu của:

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)

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

Bất kỳ gợi ý/giúp đánh giá cao.

Answer 1

Theo đề nghị của @TylerDurden

Thông báo lỗi này được sản xuất bởi một lỗi giới thiệu trong việc phát hiện chu kỳ (xem #6404).

Đã có bản sửa lỗi chính (xem #6474) chưa được phát hành. Điều này chắc chắn sẽ ở phiên bản beta.2.

Đề xuất là hạ cấp xuống beta.0 cho đến khi cơn bão kết thúc.

Cập nhật

Vấn đề này đã được sửa trong bản beta.2 (các vấn đề với việc rút gọn vẫn còn). Xem changelog để biết thêm chi tiết.

Answer 2

Sự cố này có thực sự được giải quyết không? Tôi đã làm việc trên "beta 0" và mã sau đây đã làm việc cho tôi, nhưng khi cập nhật tệp beta 2 vẫn mang lại cho tôi cùng một vấn đề như trong bài đăng này. Đây là mã của tôi:

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

tôi phải sử dụng forwardRef(function() {return RowIteratorComponent;} chức năng và forwardRef(function() {return ColumIteratorComponent;}) tương ứng cho các vòng lặp trong phiên bản Beta 0 và không có vấn đề, nhưng trong phiên bản beta2 nhận được lỗi sau:

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