What causes the this.table.data = this.tableData; the error below ? . If there are changes I assigned this.table.data = this.tableData; but currently the error is showing below , any idea guys ?

Cannot set properties of undefined (setting 'data') on line 31 on the ngOnChanges , I have tried different stuff but cant seem to figure the issue out,

Thanks.

#error

core.js:6162 ERROR TypeError: Cannot set properties of undefined (setting 'data')
    at TableMultiSortComponent.ngOnChanges (table-multi-sort.component.ts:31)
    at TableMultiSortComponent.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1520)
    at callHook (core.js:2539)
    at callHooks (core.js:2506)
    at executeInitAndCheckHooks (core.js:2457)
    at selectIndexInternal (core.js:8401)
    at Module.ɵɵadvance (core.js:8384)
    at DealsTransactionComponent_Template (deals-transaction.component.html:27)
    at executeTemplate (core.js:9549)
    at refreshView (core.js:9418)

#ts code

export class TableMultiSortComponent implements OnInit, OnChanges {
  @Input() tableOptions:any;
  @Input() tableMessage:any;
  @Input() tableData:any = [];
  @Input() isClientSide:boolean = false;
  @Input() isLoading: boolean = false;
  @Output() tableActionsEvent = new EventEmitter<any>();
  @Output() dataServiceEvent = new EventEmitter<any>() ;
  @Output() editRowEvent = new EventEmitter<any>();
  @ViewChild(MatMultiSort, { static: false }) sort: MatMultiSort;
  hasInfoMessage: boolean;
  tableConfig: any = TABLE_MULTI_SORT_OPTIONS.DEFAULT;
  table:TableData<any>;
  displayedColumns: any;
  curChanges:any
  
  constructor() { }
  ngOnChanges(changes: SimpleChanges): void {
    if(changes && changes.tableData.currentValue) {
      this.tableData = changes.tableData.currentValue
      this.table.data = this.tableData;
    }
  }

  ngOnInit(): void {   
    this.initTableMultiSort();
  }

  initTableMultiSort() {
    this.tableConfig = {
      ...this.tableConfig,
      ...this.tableOptions
    }
    
    this.table = new TableData<any>(this.tableConfig.columns,this.tableConfig.sortParams);
    this.table.pageSize = this.tableConfig.pageSize;
    this.table.pageIndex = this.tableConfig.pageIndex;
    this.table.nextObservable.subscribe(() => { this.getData(); });
    this.table.sortObservable.subscribe(() => { this.getData(); });
    this.table.previousObservable.subscribe(() => { this.getData(); });
    this.table.sizeObservable.subscribe(() => { this.getData(); });

    setTimeout(()=>{
      this.table.dataSource = new MatMultiSortTableDataSource(this.sort, this.isClientSide);
      this.getData();
    },0);
  }

  getData(){
    this.table.totalElements = 1;
    this.table.pageIndex = 0;
    this.table.totalElements = 0;
    this.table.pageSize = 10;
    this.table.data = this.tableData;
    
    if(this.dataServiceEvent) {
      this.dataServiceEvent.emit(this.table);
    }
  }
  getColumnSubtitle(id) :string{    
    return this.tableOptions.columns.filter(c => c.id === id)[0].subtitle;
  }

  getColumnSubId(id) :string{
    return this.tableOptions.columns.filter(c => c.id === id)[0].subId;
  }

  getActions(id):any{
    return this.tableOptions.columns.filter(c => c.id === id)[0].actions;
  }

  clickTableAction(actionName:string, row:any):any{
    this.tableActionsEvent.emit({
      actionName: actionName,
      data: row
    });
  }

  editRow(rowData:any){
    this.editRowEvent.emit(rowData);
  }
}

CodePudding user response：

Table should be initialized with some value first:

  tableConfig: any = TABLE_MULTI_SORT_OPTIONS.DEFAULT;
  table:TableData<any> = new TableData<any>(this.tableConfig.columns,this.tableConfig.sortParams); // <-- this
  displayedColumns: any;

Another option is to check if this.table is initialized prior to accessing it's data property.

  ngOnChanges(changes: SimpleChanges): void {
    if(changes && changes.tableData.currentValue) {
      this.tableData = changes.tableData.currentValue
      if (!this.table) {
            this.table = new TableData<any>(this.tableConfig.columns,this.tableConfig.sortParams);
      }
      this.table.data = this.tableData;
    }
  }