How to iterate the ngFor in reverse

Ionic Framework ionic-v3
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()”>

2 Likes
18

This works perfect to me. Thanks!

19

you probably meant length - i

20

<ion-item *ngFor=“let list of dewList.reverse()” >