How to iterate the ngFor in reverse

#1

I have an array called dewList. I was to iterate or get the values in the reverse order.
<ion-item *ngFor="let list of dewList" >

I have tried it with the
<ion-item *ngFor="let list of dewList.slice().reverse()" >
But I’m getting an error as

ERROR TypeError: _co.dewList.slice is not a function
    at Object.eval [as updateDirectives]

How Can I solve this?

#2

This would be an Angular question, so I would look on Stack Overflow or the Angular doc.

My guess would be either run the data through a pipe or transform it with the component code.

#3

You can try doing like this:

<div *ngFor="let list of dewList; let i=index;">
{{dewList[dewList.length - 1]}}
</div>

Hope this solutions helps you

#4

You could also try implementing a seperate ‘reversedList’ variable in your typescript, and iterate over this new list like normal in your template

TS

reversedList: Array<any> = [];

...

this.reversedList: = dewList.slice().reverse();

HTML

<ion-item *ngFor="let item of reversedList">
    {{ item }}
</ion-item>
#5

When I use it as

.then((items: any) => {
    this.dewList= items.slice().reverse();

Then it pops an error as

TypeError: items.slice is not a function

#6

Does changing the promise result to (items: Array<any>) help?

#7

Then it’s showing error as

Argument of type ‘(items: any) => void’ is not assignable to parameter of type ‘(value: Observable) => void | PromiseLike’.
Types of parameters ‘items’ and ‘value’ are incompatible.
Type ‘Observable’ is missing the following properties from type ‘any’: length, pop, push, join, and 17 more.

#8

Did my solution work for your case? Try using reverse() method instead for array before using it in your html.

#9

ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed This is the error I’m getting for your ans

#10

if ‘items’ is an Observable, you could subscribe to it and use the async pipe in the template

<ion-item *ngFor="let item of (items | async).?reverse()">
   {{ item }}
</ion-item>

reference: Angular stack overflow
(chickenninja565’s answer)

#11
Uncaught Error: Template parse errors:
Parser Error: Unexpected token ?, expected identifier or keyword
#12

Oh shoot it should be ?.
The question mark allows the view to still load if the variable has no value yet

#13

qww qww1

#14

the question mark should be before the period

<ion-item *ngFor="let item of (dewList | async)?.reverse()">  //<-- i used the wrong var name

that way, the template will still render the page if there isnt an immediate value for ‘items’

#15
ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'
Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'
#16

will this help you

#17

you could try this
<ion-row *ngFor=“let data of calArr.slice().reverse()”>

#18

This works perfect to me. Thanks!