Material Table not getting populated

Question

I am fairly new to Angular. I am developing a search page which has 2 components. "search" and "searchtable" . searchtable is using Material table. I am trying to populate the material table with data from HTTP get.However Material Table only displays the headers but no data.

<div>
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="claim">
      <mat-header-cell *matHeaderCellDef>Claim Number</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.claim}}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="fullName">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.firstName}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="formattedDateOfBirth">
            <mat-header-cell *matHeaderCellDef>Date Of Birth</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.formattedDateOfBirth}}</mat-cell>
        </ng-container>
   

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>

  export class SearchTableComponent  {
  displayedColumns = ['claim','fullName','formattedDateOfBirth'];

  isBusy: boolean
  _persons = new Array<any>();
  selectedPerson: any;

   dataSource = new MatTableDataSource<any>(this._persons);
   constructor(private personexternalservice:PersonExternalService) {    
       }

    ngOnInit(){
   }


  getPersons(searchClaim,Dob,lName,fName){

  let searchClaimNo = searchClaim.trim();
let searchDOB = Dob.trim();
let searchSurname = lName.trim();
let searchFirstname = fName.trim();
var sDOB = "";


  this.personexternalservice.searchForPerson(searchClaimNo, sDOB, searchSurname, searchFirstname)
  .then((persons) => {
          this.dataSource.data = persons;

    this._persons = new Array<any>();

    this._persons = persons.map(person => {
      person["id"] = person.pctId;

      person["fullName"] = `${person.lastName}, ${person.firstName}`;
      person["claim"] = person.claim;
      person["formattedDateOfBirth"] = moment(person.dateOfBirth).format("Do MMMM YYYY");

      return person;
    }
    );

    console.log(this._persons);
    this.isBusy = false;

  })
  .catch((e: Error) => {
    this.isBusy = false;

  });

  this.dataSource.data = this.sample;

  }
}

getPersons() is called from another component.I can see the value in the console by material table does not get populated. data returned by get is :

  [{coalServicesId: "1091", pctId: "1091", claim: "105630 ", firstName: 
             "XXXXXXXX", lastName: "XXXXXXXXXXXX"}];

score 2 · Answer 1 · answered Mar 21 '19 at 10:33

i have modified the data which you are assigning to datasource.

this.personexternalservice
  .searchForPerson(searchClaimNo, sDOB, searchSurname, searchFirstname)
  .then(persons => {
    this.dataSource.data = persons.map(person => {
      return {
        id: person.pctId,
        fullName: `${person.lastName}, ${person.firstName}`,
        claim: person.claim,
        formattedDateOfBirth: moment(person.dateOfBirth).format('Do MMMM YYYY')
      };
    });

    this.isBusy = false;
  })
  .catch((e: Error) => {
    this.isBusy = false;
  });

The issue is you are serializing the response after assigning the data to the datasource

Material Table not getting populated

1 Answers1