Roxy Roxy - 1 month ago 12
TypeScript Question

Angular2 : Uncaught ReferenceError

My data-table.component.ts has reference of TableSorting which is also defined in the same file.

When i run my application in console i get following error:


Uncaught ReferenceError: TableSorting is not defined
at line 54 which is


@Input() sorting: TableSorting;

import {
Component,
Output,
Input,
EventEmitter,
OnChanges,
SimpleChange, NgModule,
NgZone
} from '@angular/core';
import { IconComponent } from '../icon';
import { CheckboxComponent, CheckboxEvent } from '../checkbox';
import { DataField, DataType, EditType } from '../../models';
import {
SortPipe,
NumberDelimiterPipe,
RangePipe,
HighlighterPipe,
SafeHTMLPipe
} from '../../pipes';

@Component({
selector: 'data-table',
templateUrl: './data-table.component.html',
styleUrls: ['./data-table.component.css']
})

@NgModule({
declarations: [
CheckboxComponent, IconComponent, SortPipe, Range, NumberDelimiterPipe, HighlighterPipe, SafeHTMLPipe
]
})
export class DataTableComponent implements OnChanges {

public activeColor: string = '#2196f3';
public inactiveColor: string = 'grey';

@Input() columns: DataField[];
public visibleColumns: DataField[];
@Input() selectColumns: boolean = false;

@Input() data: Object[];
public tableData: DataWrapper[];

@Input() startAt: number;
@Input() visibleEntries: number;
@Output() startAtChange: EventEmitter<number> = new EventEmitter<number>();

@Input() selectable: boolean;
@Input() selected: Set<Object> = new Set<Object>();
@Input() allSelected: boolean = false;
@Input() selectMax: number = 0;
@Output() selectedChange: EventEmitter<Set<Object>> = new EventEmitter();

@Input() sorting: TableSorting;
@Output() sortingChange: EventEmitter<TableSorting> = new EventEmitter();

@Input() showIndex: boolean = true;
@Input() evenOdd: string = 'odd';
@Input() highlight: string = '';
@Input() editable: boolean = true;

private zone: NgZone;
constructor(zone: NgZone) {
this.zone = zone;
}

getEvenClass(index: number): string {
if (this.evenOdd === 'even' && index % 2) {
return 'table-row even'
}
else if (this.evenOdd === 'odd' && !(index % 2)) {
return 'table-row odd';
}
else {
return 'table-row';
}
}

ngOnChanges(changes: any) {
if (changes.data instanceof SimpleChange) {
var data = new Array<DataWrapper>();
this.data.forEach(
function (dataSet: any) {
if (dataSet['selected'] !== undefined) {
data.push(new DataWrapper(dataSet, dataSet['selected']));
} else {
data.push(new DataWrapper(dataSet));
}
}
);
this.tableData = data;
}
if (changes.columns instanceof SimpleChange) {
this.updateVisibleColumns();
}
}

public updateVisibleColumns() {
if (this.columns !== undefined) {
var visibleColumns: Array<DataField> = new Array<DataField>();
for (var i = 0; i < this.columns.length; i++) {
var column = this.columns[i];
if (column.visible) {
visibleColumns.push(column);
}
}
this.visibleColumns = visibleColumns;
}
}

public changeSorting(column: DataField) {
if (this.sorting.column === column) {
this.sorting.asc = !this.sorting.asc;
} else {
this.sorting = new TableSorting(true, column);
}
this.tableData = this.tableData.slice(0);
this.sortingChange.emit(this.sorting);
}

private toggleWrap(tableData: DataWrapper[], set: DataWrapper, event: MouseEvent) {
if (event.ctrlKey) {
var value: string = (set.wrap === '') ? DataWrapper.WRAP_CLASS : '';
tableData.forEach((set: DataWrapper) => {
set.wrap = value;
});
this.tableData = tableData.slice(0);
} else {
set.toggleWrap();
}
}

// All about selection #########################################################
public updateAllSelected(): boolean {
this.allSelected = this.selected.size === this.tableData.length || this.selected.size === this.selectMax;
return this.allSelected;
}

public toggleSelectAll(newAllSelect: any) {
this.selected = new Set<Object>();
var max = (this.selectMax > 0 && this.selectMax < this.tableData.length && newAllSelect) ? this.selectMax : this.tableData.length;
for (var i = 0; i < max; i++) {
this.tableData[i].selected = newAllSelect;
if (this.tableData[i].selected) {
this.selected.add(this.tableData[i].dataSet);
}
}
this.reachedMaxSelectable();
this.selectedChange.emit(this.selected);
}

private lastChecked: DataWrapper;
public selectedDataSet(set: DataWrapper, event: CheckboxEvent) {
if (event.checkEvent.shiftKey) {
this.selectDataSetsFromTo(this.lastChecked, set, event.checked);
}
else if (event.checked) {
set.selected = event.checked;
this.selected.add(set.dataSet);
} else {
set.selected = event.checked;
this.selected.delete(set.dataSet);
}
this.reachedMaxSelectable();

this.lastChecked = set;
this.updateAllSelected();
this.selectedChange.emit(this.selected);
}

public maxSelected: boolean = false;
private reachedMaxSelectable() {
this.maxSelected = this.selected.size >= this.selectMax;
return this.maxSelected;
}

private selectDataSetsFromTo(first: DataWrapper, last: DataWrapper, value: boolean) {
var firstIndex: number, lastIndex: number;
for (var i = 0; i < this.tableData.length; i++) {
if (this.tableData[i] === first) {
firstIndex = i;
} else if (this.tableData[i] === last ||
(i - firstIndex === this.selectMax)) {
lastIndex = i;
}
if (firstIndex !== undefined && lastIndex !== undefined) {
i = this.tableData.length;
}
}
if (firstIndex > lastIndex) {
var index = firstIndex;
firstIndex = lastIndex;
lastIndex = index;
}
var toBeOrNotToBe: any;
if (value) {
toBeOrNotToBe = function (data: any, set: Set<Object>) {
set.add(data);
}
} else {
toBeOrNotToBe = function (data: any, set: Set<Object>) {
set.delete(data);
}
}
for (var i = firstIndex; i < lastIndex; i++) {
if ((value && !this.reachedMaxSelectable()) || !value) {
this.tableData[i].selected = value;
toBeOrNotToBe(this.tableData[i].dataSet, this.selected);
}
}
this.updateAllSelected();
}

/** boolean values used to enable drag select. */
private mouseDownChecked: boolean = false;
private mouseIsDown: boolean = false;

private static ROW_CLASS_ON_DRAG_SELECT: string = 'onselecting';
private static ROW_CLASS: string = '';
private rowClass: string = DataTableComponent.ROW_CLASS;

dragStart(dataSet: DataWrapper) {
this.rowClass = DataTableComponent.ROW_CLASS_ON_DRAG_SELECT;
this.mouseDownChecked = dataSet.selected;
this.mouseIsDown = true;
}

mouseOver(dataSet: DataWrapper) {
if (this.mouseIsDown && dataSet.selected === this.mouseDownChecked) {
if (!this.mouseDownChecked) {
if (this.reachedMaxSelectable()) {
return;
}
this.selected.add(dataSet.dataSet);
} else {
this.selected.delete(dataSet.dataSet);
this.reachedMaxSelectable();
}
dataSet.selected = !this.mouseDownChecked;
dataSet.checked = true;
this.updateAllSelected();
}
}

dragEnd() {
this.rowClass = DataTableComponent.ROW_CLASS;
this.tableData.forEach((dataSet: DataWrapper) => {
dataSet.checked = false;
});
this.mouseDownChecked = false;
if (this.mouseIsDown) {
this.selectedChange.emit(this.selected);
}
this.mouseIsDown = false;
this.updateAllSelected();
}


// ########## Handles Editing if enabled #################
editInstance: Edit = new Edit();
openEdit: boolean = false;
editDataSet: any;
@Output() edited: EventEmitter<Object> = new EventEmitter<Object>();

edit(instance: Object) {
this.editDataSet = instance;
var edit = new Edit();
edit.instance = instance;
edit.dataFields = this.columns;

this.openEdit = true;
this.editInstance = edit;
}
getKeyLabelMap(columns: DataField[]): Map<string, string> {
var map: Map<string, string> = new Map<string, string>();
for (var i = 0; i < columns.length; i++) {
var column = columns[i];
if (column.editable) {
map.set(column.value, column.label);
}
}
return map;
}
doneEditing(instance: Object) {
this.openEdit = false;
this.editDataSet = instance;
this.edited.emit(instance);
}
cancelEditing() {
this.openEdit = false;
this.editInstance = new Edit();
}
}

class Edit {
public instance: Object;
public dataFields: Array<Object>;
constructor() {
this.dataFields = new Array<Object>();
}
}

export class TableSorting {
public asc: boolean = true;
public column: DataField = new DataField('', '');
constructor(asc: boolean, column: DataField) {
this.asc = asc;
this.column = column;
}
}

class DataWrapper {
public dataSet: Object;
public selected: boolean;
public checked: boolean = false;
public wrap: string = '';
public static WRAP_CLASS = 'full';

constructor(dataSet: Object, selected: boolean = false) {
this.dataSet = dataSet;
this.selected = selected;
}
public toggleWrap() {
if (this.wrap === '') {
this.wrap = DataWrapper.WRAP_CLASS;
} else {
this.wrap = '';
}
}

}


I am not able to find out why this error(in console) is coming.
Please help me with the same.

Thanks.

Answer

Move the class TableSorting to the top of the file. It is being used before it is created.