[英]Argument of type 'xyz[ ] | null ' is not assignable to parameter of type 'Collection<unknown>'
I'm writing a scenario where I get all the blogposts related to a certain category and I'm handling them using pagination by using ngx-Pagination
.我正在编写一个场景,在该场景中我获取与某个类别相关的所有博客文章,并使用
ngx-Pagination
使用分页处理它们。 But when I reload the browser the posts does not remain on the page and all the posts are lost.但是当我重新加载浏览器时,帖子不会保留在页面上并且所有帖子都丢失了。 And to cover that I'm using somekind of Of
Observable Subscription
methode by catching url route.为了说明我正在通过捕获 url 路由使用某种 Of
Observable Subscription
方法。 With that methode I'm able to store posts even if the page is reloaded.使用该方法,即使重新加载页面,我也可以存储帖子。 But the issue is that now I'm not able to use pagination as I have to use
async
in my for loop to dynamic subscribe and destroy.但问题是现在我无法使用分页,因为我必须在 for 循环中使用
async
来动态订阅和销毁。 And I'm facing the error when I try to use both async
and pagination
in for loop.当我尝试在 for 循环中同时使用
async
和pagination
时,我遇到了错误。
- error TS2345: Argument of type 'PostSchema[] |
错误 TS2345:“PostSchema[] 类型的参数 | null' is not assignable to parameter of type 'Collection'.
null' 不可分配给 'Collection' 类型的参数。
10 |
10 | async ~~~~~
异步~~~~~
ngFor loop where I'm trying to use both | async
ngFor 循环我试图同时使用
| async
| async
and | paginae:{}
| async
和| paginae:{}
| paginae:{}
, and getting error on | async
| paginae:{}
,并在| async
上出错| async
*ngFor="let post of blogposts$ | async | paginate
: {
id: 'paginate',
itemsPerPage: 4,
currentPage: page,
totalItems: result.length
}"
ts file where I'm using some method to maintain the posts ts 文件,我在其中使用某种方法来维护帖子
page: number = 1;
blogposts$: Observable<PostSchema[]> = this.activeroute.params.pipe(
switchMap((param: Params) => {
const postCategory: string = param['category'];
return this.postService
.getCategoryPosts(postCategory)
.pipe(map((blogEntery: PostSchema[]) => blogEntery));
})
);
ngOnInit(): void {
}
service.ts code服务.ts代码
url: string = 'http://localhost:3000';
public getCategoryPosts(category: string): Observable<PostSchema[]> {
return this.http.get<PostSchema[]>(
`${this.url}/blog-post/categoryPosts/${category}`,
{
headers: {
'Content-Type': 'application/json',
},
}
);
}
If I don't use the Subscription method I lose the posts over reload, and If use it I'm not able to use pagination.如果我不使用订阅方法,我会在重新加载时丢失帖子,如果使用它,我将无法使用分页。 I tried by using
OnDestroy
but I couldn't find unsubscribe
in that.我尝试使用
OnDestroy
但我找不到其中的unsubscribe
。 A solution is needed as I want both results需要一个解决方案,因为我想要两个结果
I've made the solution The error was due to types
of Observable[Array]
and Pagination
.我已经制定了解决方案错误是由于
Observable[Array]
和Pagination
的types
造成的。 So I also focused on handling types instead of handling ngFor
.I tried with unknown
and Collection<unknown>
, but with the help of type any
the issue is solved.所以我也专注于处理类型而不是处理
ngFor
。我尝试使用unknown
和Collection<unknown>
,但是在 type any
的帮助下问题得到解决。 Old ts code旧的 ts 代码
blogposts$: Observable<PostSchema[]> = this.activeroute.params.pipe(
switchMap((param: Params) => {
const postCategory: string = param['category'];
return this.postService
.getCategoryPosts(postCategory)
.pipe(map((blogEntery: PostSchema[]) => blogEntery));
})
);
Current Solution当前解决方案
blogposts$: Observable<PostSchema[] | any> = this.activeroute.params.pipe(
switchMap((param: Params) => {
const postCategory: string = param['category'];
return this.postService
.getCategoryPosts(postCategory)
.pipe(map((blogEntery: PostSchema[]) => blogEntery));
})
);
Currrent working NgFor Also as the totalItems
property will make issue as well with new settings当前工作的 NgFor 也因为
totalItems
属性也会对新设置产生问题
*ngFor="
let post of blogposts$ | async | paginate : {
id: 'paginate',
itemsPerPage: 4,
currentPage: page,
totalItems: (blogposts$ | async)?.length || 0
}
"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.