时间戳

首页 > 解决方案 > 材料表未填充

angular - 材料表未填充

问题描述

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

标签： angularangular-materialangular-material-table

解决方案

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

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

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

推荐阅读