angular / angular/components

bug(MatPaginator): page observable parameter is not an instanceof PageEvent

Ouverte
#26,546 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
area: material/paginator P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

I had expected the emitted value in the `MatPaginator`'s `.page` `Observable` to be an `instanceof PageEvent`, but that doesn't seem to be the case. I was merging several observables together and making a query to my backend, and wanted to only reset the paginator's index to 0 only after my data had returned as long as the paginator did not trigger the query. I figured I could easily check if the emitted value was an `instanceof PageEvent` or not, but that doesn't seem to be the case.

Is there a reason why this behavior is occurring other than being a possible bug? `PageEvent` is a `class` type, so I would have expected it to have been instantiated as such.

I may also be fundamentally misunderstanding something, so please forgive me.

![image](https://user-images.githubusercontent.com/59396813/216065996-5841f94f-1592-4de5-a9ff-23628ebbe176.png)

### Reproduction

This is shown in this StackBlitz: https://stackblitz.com/edit/angular-9svfyb?file=src%2Fapp%2Fpaginator-overview-example.ts

```
@Component({
selector: 'paginator-overview-example',
templateUrl: 'paginator-overview-example.html',
})
export class PaginatorOverviewExample implements AfterViewInit {
@ViewChild(MatPaginator) paginator: MatPaginator;

ngAfterViewInit() {
this.paginator.page.subscribe((pageEvent: PageEvent) =>
console.log(
'pageEvent instanceof PageEvent',
pageEvent instanceof PageEvent // this returns false
)
);
}
}

### Expected Behavior

For the page event to be an `instanceof PageEvent`

### Actual Behavior

It is not an `instanceof PageEvent`.

### Environment

(from stackblitz)
{
"name": "example-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "~15.0.0",
"@angular/cdk": "15.1.2",
"@angular/common": "~15.0.0",
"@angular/compiler": "~15.0.0",
"@angular/core": "~15.0.0",
"@angular/forms": "~15.0.0",
"@angular/material": "15.1.2",
"@angular/material-moment-adapter": "15.1.2",
"@angular/platform-browser": "~15.0.0",
"@angular/platform-browser-dynamic": "~15.0.0",
"@angular/router": "~15.0.0",
"moment": "^2.18.1",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.5"
},
"devDependencies": {
"@angular-devkit/build-angular": "~15.0.0",
"@angular/cli": "~15.0.0",
"@angular/compiler-cli": "~15.0.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.8.2"
}
}

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Start with the StackBlitz reproduction in src/app/paginator-overview-example.ts and inspect the MatPaginator page output alongside the PageEvent type. Verify the reported instanceof result and compare it with the paginator's documented or tested behavior; done means the expected behavior is confirmed and fixed or clearly documented.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
38/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.