Suppose i have this promise in my component class.
testAsyncNumber = new Promise(
(res,rej)=>{
setTimeout(()=>{res([1,2,3,4,5])
},2000);
});
In view template i need to get data using async pipe. I tried following approach.
<div>
@for (number of (testAsyncNumber | async); track number) {
{{ number }}
} @empty {
Empty list of users
}
</div>
But this doesn't work. How to overcome with this issue?
By default, TypeScript infers the type of the following Promise as Promise<unknown>. That's why you are getting an error. If you add explicit typing, it will resolve the issue:
testAsyncNumber: Promise<Array<number>> = new Promise((res, rej) => {
setTimeout(() => {
res([1, 2, 3, 4, 5]);
}, 2000);
});
OR
you can disable type checking on testAsyncNumber by adding $any function
<div>
@for (number of $any(testAsyncNumber | async); track number) {
{{ number }}
} @empty {
Empty list of users
}
</div>
You might need to utilize RxJs more:
See this on stackblitz
TS variable:
testAsyncNumber = from(
new Promise<number[]>((res) => {
setTimeout(() => {
res([1, 2, 3, 4, 5]);
}, 2000);
})
).pipe(startWith([-1]));
HTML:
<div>
@for (number of (testAsyncNumber | async); track number) {
{{ number }}
} @empty {
Empty list of users
}
</div>
