I am working on an infinite scroll in angular 8. I am using an angular
materials table to display my data.
Html:
<mat-table [dataSource]="displayOfMassSendObjects"
infinite-scroll
[infiniteScrollDistance]="scrollDistance"
[infiniteScrollUpDistance]="scrollUpDistance"
(scroll)="onScrollDown()"
(scrollup) = "onScrollUp()"
>
<ng-container id = "companyNameColumn" matColumnDef="companyName">
<mat-header-cell id = "companyNameTitle"
*matHeaderCellDef>CompanyName</mat-header-cell>
<mat-cell class = "companyNameData" *matCellDef="let row">
{{row.companyName}}</mat-cell>
</ng-container>
<ng-container id = "emailColumn" matColumnDef="email">
<mat-header-cell id = "emailTitle"
*matHeaderCellDef>Email</mat-header-cell>
<mat-cell class = "emailData" class="email" *matCellDef="let row">
{{row.email}}</a></mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: tableColumns"> </mat-row>
</mat-table>
On load I have 10 records showing up in the table. When I scroll down, I am
expecting that more records will populate in the HTML but they are not. The
records are however being added to the array in the console.log(). I think
the problem is that the HTML Angular Materials is not recognizing the .push
because when I substitute .push for .slice, the records show up in the
HTML, however don't want the app to work like that.
Here is my component for the table where I want the scroll bar:
export class MassSendComponent implements OnInit {
sum = 10;
globalList = [];
displayOfMassSendObjects: MassSend[];
tableColumns : string[] = ['ispNumber','companyName', 'email', 'taxId']
constructor(
private mockMassSendService: MockMassSendService,
) {}
ngOnInit(): void {
this.getMassSendData();
}
getMassSendData() {
this.mockMassSendService.getMassSendData()
.subscribe(massSendObjects => {
this.globalList = massSendObjects;
this.displayOfMassSendObjects = massSendObjects.slice(0,
this.sum);
});
}
getMoreData() {
this.displayOfMassSendObjects.push(this.globalList[this.sum]);
}
onScrollDown(): void {
console.log(this.displayOfMassSendObjects);
this.getMoreData();
this.sum += 1;
}
}
I also have a service method being called:
export class MockMassSendService {
constructor() { }
getMassSendData(): Observable<MassSend[]> {
return of(mockMassSend);
}
}
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/ba6bd456-3654-4573-82c9-b65b62684019%40googlegroups.com.
