X Tutup
Skip to content

ngFor trackBy error #7193

New issue
New issue
Closed
Closed
ngFor trackBy error#7193
Assignees
kara
@park9140

Description

@park9140
park9140
opened on Feb 19, 2016

I am getting the below error when doing a bunch of changes while using trackBy. It appears to happen whenever I have outstanding changes and swap put the source array of the ngFor.

EXCEPTION: TypeError: Cannot read property 'ref' of undefined in [tasks in TaskListComponent@3:12]
browser_adapter.js:81 EXCEPTION: TypeError: Cannot read property 'ref' of undefined in [tasks in TaskListComponent@3:12]BrowserDomAdapter.logError @ browser_adapter.js:81BrowserDomAdapter.logGroup @ browser_adapter.js:92ExceptionHandler.call @ exception_handler.js:53(anonymous function) @ application_ref.js:166NgZone._notifyOnError @ ng_zone.js:252collection_1.StringMapWrapper.merge.onError @ ng_zone.js:156Zone.run @ core.js:82(anonymous function) @ ng_zone.js:174NgZone.run @ ng_zone.js:137(anonymous function) @ application_ref.js:265schedulerFn @ async.js:112SafeSubscriber.__tryOrUnsub @ Subscriber.js:163SafeSubscriber.next @ Subscriber.js:118Subscriber._next @ Subscriber.js:78Subscriber.next @ Subscriber.js:55Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:75EventEmitter.emit @ async.js:93(anonymous function) @ ng_zone.js:68Zone.run @ core.js:79NgZone._notifyOnTurnDone @ ng_zone.js:67(anonymous function) @ ng_zone.js:182arguments.(anonymous function) @ functions.js:30
browser_adapter.js:81 ORIGINAL EXCEPTION: TypeError: Cannot read property 'ref' of undefinedBrowserDomAdapter.logError @ browser_adapter.js:81ExceptionHandler.call @ exception_handler.js:62(anonymous function) @ application_ref.js:166NgZone._notifyOnError @ ng_zone.js:252collection_1.StringMapWrapper.merge.onError @ ng_zone.js:156Zone.run @ core.js:82(anonymous function) @ ng_zone.js:174NgZone.run @ ng_zone.js:137(anonymous function) @ application_ref.js:265schedulerFn @ async.js:112SafeSubscriber.__tryOrUnsub @ Subscriber.js:163SafeSubscriber.next @ Subscriber.js:118Subscriber._next @ Subscriber.js:78Subscriber.next @ Subscriber.js:55Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:75EventEmitter.emit @ async.js:93(anonymous function) @ ng_zone.js:68Zone.run @ core.js:79NgZone._notifyOnTurnDone @ ng_zone.js:67(anonymous function) @ ng_zone.js:182arguments.(anonymous function) @ functions.js:30
browser_adapter.js:81 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:81ExceptionHandler.call @ exception_handler.js:65(anonymous function) @ application_ref.js:166NgZone._notifyOnError @ ng_zone.js:252collection_1.StringMapWrapper.merge.onError @ ng_zone.js:156Zone.run @ core.js:82(anonymous function) @ ng_zone.js:174NgZone.run @ ng_zone.js:137(anonymous function) @ application_ref.js:265schedulerFn @ async.js:112SafeSubscriber.__tryOrUnsub @ Subscriber.js:163SafeSubscriber.next @ Subscriber.js:118Subscriber._next @ Subscriber.js:78Subscriber.next @ Subscriber.js:55Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:75EventEmitter.emit @ async.js:93(anonymous function) @ ng_zone.js:68Zone.run @ core.js:79NgZone._notifyOnTurnDone @ ng_zone.js:67(anonymous function) @ ng_zone.js:182arguments.(anonymous function) @ functions.js:30
browser_adapter.js:81 TypeError: Cannot read property 'ref' of undefined
    at ViewContainerRef_.get (view_container_ref.js:47)
    at ng_for.js:84
    at DefaultIterableDiffer.forEachIdentityChange (default_iterable_differ.js:105)
    at NgFor._applyChanges (ng_for.js:82)
    at NgFor.ngDoCheck (ng_for.js:58)
    at AbstractChangeDetector.ChangeDetector_TaskListComponent_1.detectChangesInRecordsInternal (viewFactory_TaskListComponent:207)
    at AbstractChangeDetector.detectChangesInRecords (abstract_change_detector.js:105)
    at AbstractChangeDetector.runDetectChanges (abstract_change_detector.js:88)
    at AbstractChangeDetector._detectChangesContentChildren (abstract_change_detector.js:167)
    at AbstractChangeDetector.runDetectChanges (abstract_change_detector.js:89)BrowserDomAdapter.logError @ browser_adapter.js:81ExceptionHandler.call @ exception_handler.js:66(anonymous function) @ application_ref.js:166NgZone._notifyOnError @ ng_zone.js:252collection_1.StringMapWrapper.merge.onError @ ng_zone.js:156Zone.run @ core.js:82(anonymous function) @ ng_zone.js:174NgZone.run @ ng_zone.js:137(anonymous function) @ application_ref.js:265schedulerFn @ async.js:112SafeSubscriber.__tryOrUnsub @ Subscriber.js:163SafeSubscriber.next @ Subscriber.js:118Subscriber._next @ Subscriber.js:78Subscriber.next @ Subscriber.js:55Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:75EventEmitter.emit @ async.js:93(anonymous function) @ ng_zone.js:68Zone.run @ core.js:79NgZone._notifyOnTurnDone @ ng_zone.js:67(anonymous function) @ ng_zone.js:182arguments.(anonymous function) @ functions.js:30
browser_adapter.js:81 ERROR CONTEXT:BrowserDomAdapter.logError @ browser_adapter.js:81ExceptionHandler.call @ exception_handler.js:69(anonymous function) @ application_ref.js:166NgZone._notifyOnError @ ng_zone.js:252collection_1.StringMapWrapper.merge.onError @ ng_zone.js:156Zone.run @ core.js:82(anonymous function) @ ng_zone.js:174NgZone.run @ ng_zone.js:137(anonymous function) @ application_ref.js:265schedulerFn @ async.js:112SafeSubscriber.__tryOrUnsub @ Subscriber.js:163SafeSubscriber.next @ Subscriber.js:118Subscriber._next @ Subscriber.js:78Subscriber.next @ Subscriber.js:55Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:75EventEmitter.emit @ async.js:93(anonymous function) @ ng_zone.js:68Zone.run @ core.js:79NgZone._notifyOnTurnDone @ ng_zone.js:67(anonymous function) @ ng_zone.js:182arguments.(anonymous function) @ functions.js:30
browser_adapter.js:81 _Context {element: comment, componentElement: comment, context: TaskListComponent, locals: Object, injector: Injector…}BrowserDomAdapter.logError @ browser_adapter.js:81ExceptionHandler.call @ exception_handler.js:70(anonymous function) @ application_ref.js:166NgZone._notifyOnError @ ng_zone.js:252collection_1.StringMapWrapper.merge.onError @ ng_zone.js:156Zone.run @ core.js:82(anonymous function) @ ng_zone.js:174NgZone.run @ ng_zone.js:137(anonymous function) @ application_ref.js:265schedulerFn @ async.js:112SafeSubscriber.__tryOrUnsub @ Subscriber.js:163SafeSubscriber.next @ Subscriber.js:118Subscriber._next @ Subscriber.js:78Subscriber.next @ Subscriber.js:55Subject._finalNext @ Subject.js:124Subject._next @ Subject.js:116Subject.next @ Subject.js:75EventEmitter.emit @ async.js:93(anonymous function) @ ng_zone.js:68Zone.run @ core.js:79NgZone._notifyOnTurnDone @ ng_zone.js:67(anonymous function) @ ng_zone.js:182arguments.(anonymous function) @ functions.js:30
browser_adapter.js:91 EXCEPTION: TypeError: Cannot read property 'ref' of undefined in [tasks in TaskListComponent@3:12]
browser_adapter.js:81 EXCEPTION: TypeError: Cannot read property 'ref' of undefined in [tasks in TaskListComponent@3:12]BrowserDomAdapter.logError @ browser_adapter.js:81BrowserDomAdapter.logGroup @ browser_adapter.js:92ExceptionHandler.call @ exception_handler.js:53(anonymous function) @ application_ref.js:166NgZone._notifyOnError @ ng_zone.js:252collection_1.StringMapWrapper.merge.onError @ ng_zone.js:156Zone.run @ core.js:82NgZone._notifyOnTurnDone @ ng_zone.js:67(anonymous function) @ ng_zone.js:182arguments.(anonymous function) @ functions.js:30
browser_adapter.js:81 ORIGINAL EXCEPTION: TypeError: Cannot read property 'ref' of undefinedBrowserDomAdapter.logError @ browser_adapter.js:81ExceptionHandler.call @ exception_handler.js:62(anonymous function) @ application_ref.js:166NgZone._notifyOnError @ ng_zone.js:252collection_1.StringMapWrapper.merge.onError @ ng_zone.js:156Zone.run @ core.js:82NgZone._notifyOnTurnDone @ ng_zone.js:67(anonymous function) @ ng_zone.js:182arguments.(anonymous function) @ functions.js:30
browser_adapter.js:81 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:81ExceptionHandler.call @ exception_handler.js:65(anonymous function) @ application_ref.js:166NgZone._notifyOnError @ ng_zone.js:252collection_1.StringMapWrapper.merge.onError @ ng_zone.js:156Zone.run @ core.js:82NgZone._notifyOnTurnDone @ ng_zone.js:67(anonymous function) @ ng_zone.js:182arguments.(anonymous function) @ functions.js:30
browser_adapter.js:81 TypeError: Cannot read property 'ref' of undefined
    at ViewContainerRef_.get (view_container_ref.js:47)
    at ng_for.js:84
    at DefaultIterableDiffer.forEachIdentityChange (default_iterable_differ.js:105)
    at NgFor._applyChanges (ng_for.js:82)
    at NgFor.ngDoCheck (ng_for.js:58)
    at AbstractChangeDetector.ChangeDetector_TaskListComponent_1.detectChangesInRecordsInternal (viewFactory_TaskListComponent:207)
    at AbstractChangeDetector.detectChangesInRecords (abstract_change_detector.js:105)
    at AbstractChangeDetector.runDetectChanges (abstract_change_detector.js:88)
    at AbstractChangeDetector._detectChangesContentChildren (abstract_change_detector.js:167)
    at AbstractChangeDetector.runDetectChanges (abstract_change_detector.js:89)BrowserDomAdapter.logError @ browser_adapter.js:81ExceptionHandler.call @ exception_handler.js:66(anonymous function) @ application_ref.js:166NgZone._notifyOnError @ ng_zone.js:252collection_1.StringMapWrapper.merge.onError @ ng_zone.js:156Zone.run @ core.js:82NgZone._notifyOnTurnDone @ ng_zone.js:67(anonymous function) @ ng_zone.js:182arguments.(anonymous function) @ functions.js:30
browser_adapter.js:81 ERROR CONTEXT:BrowserDomAdapter.logError @ browser_adapter.js:81ExceptionHandler.call @ exception_handler.js:69(anonymous function) @ application_ref.js:166NgZone._notifyOnError @ ng_zone.js:252collection_1.StringMapWrapper.merge.onError @ ng_zone.js:156Zone.run @ core.js:82NgZone._notifyOnTurnDone @ ng_zone.js:67(anonymous function) @ ng_zone.js:182arguments.(anonymous function) @ functions.js:30
browser_adapter.js:81 _Context {element: comment, componentElement: comment, context: TaskListComponent, locals: Object, injector: Injector…}BrowserDomAdapter.logError @ browser_adapter.js:81ExceptionHandler.call @ exception_handler.js:70(anonymous function) @ application_ref.js:166NgZone._notifyOnError @ ng_zone.js:252collection_1.StringMapWrapper.merge.onError @ ng_zone.js:156Zone.run @ core.js:82NgZone._notifyOnTurnDone @ ng_zone.js:67(anonymous function) @ ng_zone.js:182arguments.(anonymous function) @ functions.js:30
exception_handler.js:74 Uncaught EXCEPTION: TypeError: Cannot read property 'ref' of undefined in [tasks in TaskListComponent@3:12]
ORIGINAL EXCEPTION: TypeError: Cannot read property 'ref' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'ref' of undefined
    at ViewContainerRef_.get (http://tm.daptiv.com/main.js:46579:46)
    at http://tm.daptiv.com/main.js:22571:44
    at DefaultIterableDiffer.forEachIdentityChange (http://tm.daptiv.com/main.js:47130:9)
    at NgFor._applyChanges (http://tm.daptiv.com/main.js:22570:15)
    at NgFor.ngDoCheck (http://tm.daptiv.com/main.js:22545:16)
    at AbstractChangeDetector.ChangeDetector_TaskListComponent_1.detectChangesInRecordsInternal (viewFactory_TaskListComponent:207:48)
    at AbstractChangeDetector.detectChangesInRecords (http://tm.daptiv.com/main.js:51037:14)
    at AbstractChangeDetector.runDetectChanges (http://tm.daptiv.com/main.js:51020:12)
    at AbstractChangeDetector._detectChangesContentChildren (http://tm.daptiv.com/main.js:51099:14)
    at AbstractChangeDetector.runDetectChanges (http://tm.daptiv.com/main.js:51021:12)
ERROR CONTEXT:
[object Object]

Offending Component implementation

@Component({
    selector: 'task-list.block-component',
    inputs: ['tasks'],
    directives: [NgFor, NgIf, TaskItemComponent],
    template: `
    <div *ngIf="tasks.length > 0">
        <task-item
            *ngFor="var task of tasks; #i=index; trackBy:taskTrackBy"
            [task]="task"
            (taskFlagChanged)="taskFlagStateChanged(task, $event)"
            (dragstart)="$event.dataTransfer.setData('task', task.id)"></task-item>
    </div>
    <div *ngIf="tasks.length === 0">No Tasks available.</div>
    `
})
export class TaskListComponent {
    constructor(private dispatcher: Dispatcher) {
    }

    taskTrackBy(index: number, task: Task) {
        return task.id;
    }

    taskFlagStateChanged(task: Task, flagState: boolean) {
        if (flagState) {
            this.dispatcher.sendAction(TaskActions.Flag.create(task));
        } else {
            this.dispatcher.sendAction(TaskActions.Unflag.create(task));
        }
    }

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions
    X Tutup