我的 data-table.component.ts 引用了TableSorting，它也在同一个文件中定义。
当我在控制台中运行我的应用程序时，我得到以下错误：
未捕获的ReferenceError：未定义TableSorting <54>这是
@Input（）排序：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 = '';
}
}
}
我无法找出为什么会出现此错误（在控制台中）。 请帮助我。
感谢。
答案 0 :(得分：3)
将班级TableSorting移至文件顶部。它在创建之前被使用。