Observer subscribe doesn't load the data to dataSource, using material table Angular

Question

I am using Angular material table but the datasource doesn't show any data on my screen. I have a add-person component which loads some data in 'ContactsList: Contacts[];' I use api to return the data to the ContactsList and want to load the data into datasourse in order to show the data on material table, however, there is no data to show up on the screen..

How I can load the data on datasource material table?

add-person.component.ts

  //public ContList: Observable<Contacts>;
  ContactsList: Contacts[];
  personId: number;
  displayedColumns = ['person_contact_ID', 'media', 'actionsColumn'];
  constructor(private _avRoute: ActivatedRoute,
    private _personService: TestRDB2Service, private _router: Router,
    private store: Store<AppState>, private personValidator: ValidatorService) {
    if (this._avRoute.snapshot.params['id']) {
      this.personId = this._avRoute.snapshot.params['id'];
    }
}

 //@Input() personList 
 //@Input() NewContactsList:Contacts[];
  @Output() NewContactsListChange = new EventEmitter<Contacts[]>();
  dataSource: TableDataSource<Contacts>;


  ngOnInit() {
this._personService.GetPerson_ContactList(this.personId).subscribe(
      (data: Contacts[]) => this.ContactsList = data
    );
    this.dataSource = new TableDataSource<any>(this.ContactsList, Contacts);
    this.dataSource.datasourceSubject.subscribe(ContactsList => this.NewContactsListChange.emit(this.ContactsList));
  }

add-person.component.html

<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="person_contact_ID">
    <mat-header-cell *matHeaderCellDef> Person Contact ID </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <mat-form-field floatLabel="{{ row.editing ? 'float' : 'never'}}">
        <input [(ngModel)]="row.currentData.person_contact_ID" placeholder="Person Contact ID" [disabled]="!row.editing" matInput>
      </mat-form-field>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="media">
    <mat-header-cell *matHeaderCellDef> Media </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <mat-form-field floatLabel="{{ row.editing ? 'float' : 'never'}}">
        <input [(ngModel)]="row.currentData.media" placeholder="Media" [disabled]="!row.editing" matInput>
      </mat-form-field>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="actionsColumn">
  <mat-header-row *matHeaderRowDef="displayedColumn
s"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

Answer 1

You are trying to assign this.dataSource outside the subscribe, its value will be set without waiting for the subscribe to return a response.

So when you call this.dataSource = new TableDataSource<any>(this.ContactsList, Contacts); the variable this.ContactsList will be empty.

Try changing:

ngOnInit() {
this._personService.GetPerson_ContactList(this.personId).subscribe(
      (data: Contacts[]) => this.ContactsList = data
    );
    this.dataSource = new TableDataSource<any>(this.ContactsList, Contacts);
    this.dataSource.datasourceSubject.subscribe(ContactsList => this.NewContactsListChange.emit(this.ContactsList));
  }

to:

ngOnInit() {
  this._personService.GetPerson_ContactList(this.personId).subscribe(
    (data: Contacts[]) => {
      this.ContactsList = data
      this.dataSource = new TableDataSource<any>(this.ContactsList, Contacts);
      this.dataSource.datasourceSubject.subscribe(ContactsList => this.NewContactsListChange.emit(this.ContactsList));
    }
  );
}```