Material angular table with dynamic data

Question

I am new to angular and i am trying to make a dynamic table to display data.

Right i have it (somewhat working) with static data.

I was inspired from this example here: 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);

This works fine, but when i want to use dynamic data i initialize an empty array, and what for user input to query my backend dynamically.


  constructor(private httpClient: HttpClient){
    this.isSearching = false
    this.columnsData = []
    //Hardcoded as of now, we can import and parse from backend in the future
  }
  
  ngOnInit(){
    console.log(this.columnsData)
    fromEvent(this.searchInput.nativeElement, 'keyup').pipe(
      //Find type for js event
      map((event: any) =>{
        return event.target.value
      }),
      debounceTime(700),
      distinctUntilChanged(),
      .....

When i try to substitute the COLUMN_DATA with this.columnData i get an error like such:

Property 'columnsData' is used before its initialization.

How can i substitute this with dynamic data?

Please create stackblitz sample for second version of your code. — Alireza Ahmadi
– Alireza Ahmadi, Commented Aug 12, 2021 at 9:53
Instead of assigning value in the constructor, assign the value during the declaration of the variable, i.e. columnsData: IClusterColumnOrient[] = [];. I assume the error comes from TSlint, ESlint or something similar, which ensures you don't use properties that were not initialized. The code, if compiled, would work correctly, but the strict checks ensure you don't make any mistakes. You can probably disable it somewhere in your linting options. — TotallyNewb
– TotallyNewb, Commented Aug 12, 2021 at 10:14

OctavianM · Accepted Answer · 2021-08-12 10:15:59Z

1

The error message is revealing an important clue here. You only declare the property columnsData: IClusterColumnOrient[] without initializing it. You take care of the initialization of this variable inside of your constructor, but at the time you create the MatTableDataSource it is still uninitialized, only declared. You can only declare the data source as you do with the columnsData property

dataSource: MatTableDataSource<IClusterColumnOrient>;

and then move your datasource initialization inside the constructor as well to avoid this problem.

constructor(private httpClient: HttpClient){
    this.isSearching = false
    this.columnsData = []
    this.dataSource = new MatTableDataSource<IClusterColumnOrient>(this.columnsData);
  }

answered Aug 12, 2021 at 10:15

OctavianM

4,6171 gold badge18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Material angular table with dynamic data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related