angular / angular/components

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

Abierto
#26,546 1 comentario 0 reacciones 0 asignados Ver en GitHub
area: material/paginator P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### 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"
}
}

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
38/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.