[英]rxjs startWith but on nested array
I have a component whose rxjs listens to changes in the queryparams:我有一个组件,其 rxjs 监听查询参数的变化:
universityApplications$ = this.activatedRoute.queryParams.pipe(
switchMap((obj) => this.httpService.getUniversityApplicationsList(this.numberOfRows, new URLSearchParams(obj).toString()).pipe(startWith(null))
));
And for the html而对于 html
<div class="skeleton-y5ha4dikw8f">
<ng-container *ngIf="(universityApplications$ | async)?.data as uniData">
<p-table [value]="uniData">
<ng-template pTemplate="header">
<tr>
<th>Application name</th>
<th>University</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-detail>
<tr>
<td>{{detail.name}}</td>
<td>{{detail.university_name}}</td>
</tr>
</ng-template>
</p-table>
</ng-container>
</div>
<p-paginator *ngIf="(universityApplications$ | async)?.pagination as paginationData" [rows]="numberOfRows" [first]="paginationData.current_page" [totalRecords]="paginationData.total" (onPageChange)="paginate($event)" #pp></p-paginator>
And this works fine.这很好用。 When I click through the pagination the page changes correctly.当我点击分页时,页面会正确更改。 Since I'm using startWith(null)
my inner data
array gets wiped each time so I can see the nice skeleton screen.由于我使用的是startWith(null)
,我的内部data
数组每次都会被擦除,因此我可以看到漂亮的骨架屏幕。 However the pagination also gets wiped out and I want that to always stay on screen until it gets updated.但是,分页也被清除了,我希望它始终保留在屏幕上,直到它被更新。 Is there a way I can only have startWith(null)
only apply to the inner data
array?有没有办法让startWith(null)
只应用于内部data
数组?
What if you introduce a dedicated observable nonNullResult$
for the paginator, that ignores null
-values?如果您为分页器引入一个专用的可观察nonNullResult$
,它会忽略null
怎么办? Eg you could do something like this:例如你可以这样做:
Component TS :组件 TS :
universityApplications$ = this.activatedRoute.queryParams.pipe(
switchMap((obj) => this.httpService.getUniversityApplicationsList(this.numberOfRows, new URLSearchParams(obj).toString()).pipe(startWith(null))
));
nonNullResult$ = this.universityApplications$.pipe(filter(x => !!x));
Component HTML :组件 HTML :
<p-paginator *ngIf="(nonNullResult$ | async)?.pagination as paginationData" [rows]="numberOfRows" [first]="paginationData.current_page" [totalRecords]="paginationData.total" (onPageChange)="paginate($event)" #pp></p-paginator>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.