Question

我对Angular很陌生。我正在开发一个包含2个组件的搜索页面。 “搜索”和“搜索表”。 searchtable正在使用Material表。我正在尝试使用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"}];

Answer 1

我已经修改了您要分配给数据源的数据。

bar

问题是您将数据分配给数据源后正在序列化响应

物料表未填充

1 个答案: