Угловой Субъект не слушает изменения

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. Тогда тоже обнови.

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

очевидно, объявлять и инициализировать источник данных глобально. Объявите ViewChild тоже.

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

Обновите HTML тоже.

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