javascript - How to reverse order in *ngFor? - Stack Overflow

admin管理员组

文章数量:1025251

Please help user order module in *ngFor directive.

I install "ngx-order-pipe": "^1.0.2", and use it in app.module.ts:

import { OrderModule } from 'ngx-order-pipe';
...
..

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    OrderModule,
    ...
    ..
  ],
  providers: [AgendaService],
  bootstrap: [AppComponent]
})
export class AppModule { }

My template:

<div class="line" *ngFor="let line of agenda | orderBy:'order'; let iLine = index">
  <div class="left">
    {{ line.start.trim() }} - {{ line.end.trim() }}  
    = {{line.order}} 
  </div>       
</div>

It worked (lines sorted ascending). But i need lines sorted descending.

I try follow:

<div class="line" *ngFor="let line of agenda | orderBy:'-order'; let iLine = index">
    .....    
</div>

But it not worked.

GITHUB is here

Please help user order module in *ngFor directive.

I install "ngx-order-pipe": "^1.0.2", and use it in app.module.ts:

import { OrderModule } from 'ngx-order-pipe';
...
..

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    OrderModule,
    ...
    ..
  ],
  providers: [AgendaService],
  bootstrap: [AppComponent]
})
export class AppModule { }

My template:

<div class="line" *ngFor="let line of agenda | orderBy:'order'; let iLine = index">
  <div class="left">
    {{ line.start.trim() }} - {{ line.end.trim() }}  
    = {{line.order}} 
  </div>       
</div>

It worked (lines sorted ascending). But i need lines sorted descending.

I try follow:

<div class="line" *ngFor="let line of agenda | orderBy:'-order'; let iLine = index">
    .....    
</div>

But it not worked.

GITHUB is here

• javascript
• angular

Share Improve this question Follow edited Oct 21, 2017 at 10:22 Martin Adámek 18.5k55 gold badges4848 silver badges7171 bronze badges asked Oct 21, 2017 at 9:33 super.prozandr1super.prozandr1 12733 silver badges1010 bronze badges 1

• How did it not work? What did you expect to happen? What id actually happen? – Lazar Ljubenović Commented Oct 21, 2017 at 9:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The ngx-order-pipe has this syntax:

{{ collection | orderBy: expression : reverse }}

So to use descending order, you need to use second parameter:

*ngFor="let line of agenda | orderBy:'order':true; let iLine = index"

More about this on their github:

https://github./VadimDez/ngx-order-pipe

Please help user order module in *ngFor directive.

I install "ngx-order-pipe": "^1.0.2", and use it in app.module.ts:

import { OrderModule } from 'ngx-order-pipe';
...
..

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    OrderModule,
    ...
    ..
  ],
  providers: [AgendaService],
  bootstrap: [AppComponent]
})
export class AppModule { }

My template:

<div class="line" *ngFor="let line of agenda | orderBy:'order'; let iLine = index">
  <div class="left">
    {{ line.start.trim() }} - {{ line.end.trim() }}  
    = {{line.order}} 
  </div>       
</div>

It worked (lines sorted ascending). But i need lines sorted descending.

I try follow:

<div class="line" *ngFor="let line of agenda | orderBy:'-order'; let iLine = index">
    .....    
</div>

But it not worked.

GITHUB is here

Please help user order module in *ngFor directive.

I install "ngx-order-pipe": "^1.0.2", and use it in app.module.ts:

import { OrderModule } from 'ngx-order-pipe';
...
..

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    OrderModule,
    ...
    ..
  ],
  providers: [AgendaService],
  bootstrap: [AppComponent]
})
export class AppModule { }

My template:

<div class="line" *ngFor="let line of agenda | orderBy:'order'; let iLine = index">
  <div class="left">
    {{ line.start.trim() }} - {{ line.end.trim() }}  
    = {{line.order}} 
  </div>       
</div>

It worked (lines sorted ascending). But i need lines sorted descending.

I try follow:

<div class="line" *ngFor="let line of agenda | orderBy:'-order'; let iLine = index">
    .....    
</div>

But it not worked.

GITHUB is here

• javascript
• angular

Share Improve this question Follow edited Oct 21, 2017 at 10:22 Martin Adámek 18.5k55 gold badges4848 silver badges7171 bronze badges asked Oct 21, 2017 at 9:33 super.prozandr1super.prozandr1 12733 silver badges1010 bronze badges 1

• How did it not work? What did you expect to happen? What id actually happen? – Lazar Ljubenović Commented Oct 21, 2017 at 9:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The ngx-order-pipe has this syntax:

{{ collection | orderBy: expression : reverse }}

So to use descending order, you need to use second parameter:

*ngFor="let line of agenda | orderBy:'order':true; let iLine = index"

More about this on their github:

https://github./VadimDez/ngx-order-pipe

本文标签： javascriptHow to reverse order in *ngForStack Overflow