Question

我有一个Mat表，它通过Http get获取数据。我首先在页面加载后填充表格，然后在搜索完成后填充表格。我的表最初是填充的，但是当数据源更新时，表不会显示更新的数据。我正在使用主题听任何更改。我可以在控制台中看到更新的值。

export class SearchTableComponent implements OnInit {

   displayedColumns = ['claim', 'firstName', 'dateOfBirth'];

   isBusy: boolean
   _persons : person[] =[];
   personObservalbe$ = new Subject<person[]>();
   constructor(private personexternalservice: PersonExternalService) { }

   ngOnInit() {
     this.getPersons('','','','');//to load first 100 rows when the 
       pageloads 

     this.personObservalbe$.subscribe((result:person[])=>{
     console.log('init1');
     console.log(result);
     this.dataSource = new MatTableDataSource(result);

    });
 }


   //function called on button click  
  getPersons(searchClaim, Dob, lName, fName) {

   let searchClaimNo = searchClaim;
   let searchDOB = Dob;
   let searchSurname = lName;
   let searchFirstname = fName;
   var sDOB = "";

   this.isBusy = true;

  if (searchClaimNo == '')
    searchClaimNo = "empty";

  if (sDOB == '')
    sDOB = "empty";

 if (searchSurname == '')
   searchSurname = "empty";

 if (searchFirstname == '')
   searchFirstname = "empty";

 this.personexternalservice._searchForPeson(searchClaimNo, sDOB, searchSurname, searchFirstname)
  .subscribe( ( person$  => {
   this.personObservalbe$.next(person$);
   console.log(person$);
  })
 );

}

export class person {
  coalServicesId: string;
  firstName: string;
  lastName: string;
  pctId: string;
  claim: string;
  dateOfBirth: string;
}

和

// Service called
_searchForPeson(claimsNo:string, DOB:string, surname:string, 
  firstName:string):Observable<any> {
    return this.http.get(`api/Mockup/Search/${claimsNo}/${DOB}/${surname}/${firstName}`);
}

HTML <mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="claim"> <mat-header-cell *matHeaderCellDef>Claim</mat-header-cell> <mat-cell *matCellDef="let element">{{element.claim}}<a fxFlexFill class="mat-row-link"></a></mat-cell> </ng-container> <ng-container matColumnDef="firstName"> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell> <mat-cell *matCellDef="let element">{{element.firstName}} {{element.lastName}}</mat-cell> </ng-container> <ng-container matColumnDef="dateOfBirth"> <mat-header-cell *matHeaderCellDef>Date Of Birth</mat-header-cell> <mat-cell *matCellDef="let element">{{element.dateOfBirth}}</mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row routerLink="" *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table>

Answer 1

您需要将结果集设置为dataSource，而不是在subscription中创建对象。然后也刷新它。

this.personObservalbe$.asObservable().subscribe((result:person[])=> {
   this.dataSource.data = result; 
   this.table.renderRows(); 
});

显然，全局声明和初始化dataSource。还要声明ViewChild。

dataSource = new MatTableDataSource();
@ViewChild(MatTable) table:

也更新html。

<mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">

角度主题不听变化

1 个答案: