Angular2：Uncaught ReferenceError

Question

My data-table.component.tsには、同じファイル内でも定義されているTableSortingの参照があります。

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

@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 = ''; 
     } 
    } 

} 

私は（コンソールで）このエラーが来ている理由を見つけることができないのです。 同じように私を助けてください。

ありがとうございました。

Answer 1

クラスTableSortingをファイルの先頭に移動します。作成前に使用されています。