首页 文章

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

提问于
浏览 次
5

我在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.de v.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 @ angu lar2.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.creat上的AppElement.viewFactory_ComponentA1 [as embeddedViewFactory]（viewFactory_ComponentA：388）的函数eEmbeddedViewInContainer（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 {}

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

javascript angular angular2-template

2 回答

  • 1

    正如@TylerDurden所说

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

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

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

    更新

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

    回复于
  • 6

    这个问题真的解决了吗？我正在研究“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
}

    我必须分别使用 forwardRef(function() {return RowIteratorComponent;} 函数和 forwardRef(function() {return ColumIteratorComponent;}) 作为Beta 0版本的循环并且没有问题，但在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...
    回复于

相关问题