Recently, I've delved into Angular and have been experimenting with creating a dynamic table to showcase data.
Currently, I have managed to get it partially working with static data.
I drew inspiration from this particular example: https://stackblitz.com/angular/lrpjroljdly?embed=1&file=app/table-selection-example.html
const COLUMN_DATA: IClusterColumnOrient[] = [...Array(10).keys()].map((_, index) =>({
columnName: (Math.random() + 1).toString(36).substring(7),
schemaName: (Math.random() + 1).toString(36).substring(7),
columnType: (Math.random() + 1).toString(36).substring(7),
id: (Math.random() + 1).toString(36).substring(7),
tableName: (Math.random() + 1).toString(36).substring(7),
databaseName: (Math.random() + 1).toString(36).substring(7),
databaseId: (Math.random() + 1).toString(36).substring(7)
}))
@Component({
selector: 'column-search',
templateUrl: './column-search.component.html',
styleUrls: ['./column-search.component.scss'],
})
export class ColumnSearchComponent implements OnInit{
displayedColumns: string[] = ['select', 'columnName', 'columnType', 'tableName', 'schemaName'];
selection = new SelectionModel<IClusterColumnOrient>(true, []);
@ViewChild('searchInput', { static: true }) searchInput: ElementRef;
columnsData: IClusterColumnOrient[]
isSearching: boolean
columns: string[]
dataSource = new MatTableDataSource<IClusterColumnOrient>(COLUMN_DATA);
While this setup works effectively, when attempting to switch out the COLUMN_DATA with this.columnData for dynamic data, an error surfaces:
Property 'columnsData' is used before its initialization.How can I successfully substitute this with dynamic data?