typescript - Angular - Observable eller Subject för DataSource

Jag har en Angular 7-applikation med Mat Tables som hämtar data från API. Jag har tilldelat dynamiska pagineringsvärden, det vill säga pageSizeOptions-värdet kommer att ändras varje gång jag laddar rutnätet baserat på ett visst dropdownvärde och som standard kommer alla poster att visas.

Om API returnerar 23 poster, kommer pageSizeOptions att ha 10, 20, 23, 30, 40, 50 och som standard kommer det att visa alla 23 poster. När jag nästa gång ändrar värdet i rullgardinsmenyn, returnerar API 45 poster men den här gången visar fortfarande mitt rutnät bara 23 poster trots att pageSizeOptions har 10, 20, 30, 40, 45, 50 och markeringen visar 45 som valt.

Jag antar att detta beror på att View/Grid laddas innan värdet för pageSizeOptions tilldelas eftersom API:et tar lite tid på sig att returnera data. Jag tänkte lösa detta problem genom att implementera Observable/subscribe.

Jag är inte säker på hur man implementerar dessa för pageSizeOptions. Kan någon snälla hjälpa mig att lösa detta.

let gridData = responseStudents.Students.map(item => new ResponseStudents());
this.myDataSource = new MatTableDataSource(gridData);
this.Count = gridData.length;
this.PageSizeOptions = [this.Count, 5, 10, 25, 100, 500];
//To remove duplicate
this.PageSizeOptions = Array.from(this.PageSizeOptions.reduce((m, t) => m.set(t, t), new Map()).values());

Svar #1

Jag kunde få en StackBlitz som kan uppnå grunden för det du letar efter. Det visade sig finnas vissa problem med att faktiskt uppdatera tabellen när det gällde siduppdateringar gjorda via komponentfilen, så jag valde att ändra dataSource.

Du bör i princip kunna ta koden som visas i changePageArray()-metoden och implementera den för ditt användningsfall. Lägg till logik där det behövs, och kanske uppdatera changeDetection om det inte sprider sig till användargränssnittet.

Hoppas detta är vad du letade efter, glad kodning!