Таблица материалов не заполняется

Я новичок в Angular. Я разрабатываю страницу поиска, состоящую из двух компонентов. "поиск" и "таблица поиска". таблица поиска использует таблицу материалов. Я пытаюсь заполнить таблицу материалов данными из HTTP get. Однако таблица материалов отображает только заголовки, но не данные.

<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 () вызывается из другого компонента. Я вижу, что значение в консоли по таблице материалов не заполняется. данные, возвращаемые get:

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


person Rahat Saini    schedule 21.03.2019    source источник


Ответы (1)


Я изменил данные, которые вы назначаете источнику данных.

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;
  });

Проблема в том, что вы сериализуете ответ после назначения данных источнику данных.

person Sheik Althaf    schedule 21.03.2019