VadimDez / ngx-order-pipe

▼ Angular 5+ orderBy pipe
https://vadimdez.github.io/ngx-order-pipe/
MIT License
243 stars 57 forks source link

The pipe 'orderBy' could not be found #51

Closed Guru992 closed 6 years ago

Guru992 commented 6 years ago

First of all thank you for great work with pipe, I would love to use it, but I have an error "The pipe 'orderBy' could not be found". I've tried to do this with your ngx-order-pipe example, but it's not working. Order Module is imported in app.module.ts. My code:

html:

`<tr *ngFor="let rider of pgee2017 | orderBy: order; let i = index">`
<td> {{rider.MSC}} </td>
<td> {{rider.ZAWODNIK}} </td>
<td> {{rider.KLUB}} </td>

appComponent:

import { Component, OnInit } from '@angular/core';
import { Rider } from "../riders/rider";
import { Danepgee2017Service } from '../../danepgee2017.service';
import { OrderPipe } from 'ngx-order-pipe';

@Component({
  selector: 'gs-pgee2017-stats',
  templateUrl: './pgee2017-stats.component.html',
  styleUrls: ['./pgee2017-stats.component.less'],
})
export class Pgee2017StatsComponent {
pgee2017: Array<any>;
order: string ='msc';
reverse: boolean = false;
  constructor(private _danePgee2017Service: Danepgee2017Service,
    private orderPipe: OrderPipe) 
  {

    this._danePgee2017Service.getPgee2017().subscribe(response => this.pgee2017 = response);
    console.log(this.orderPipe.transform(this._danePgee2017Service, this.order));
}

    setOrder(value: string) {
    if (this.order === value) {
      this.reverse = !this.reverse;
    }
    this.order = value;
}
}

I would be grateful for help. Cheers.

VadimDez commented 6 years ago

What version of ngx-order-pipe are you using?

Guru992 commented 6 years ago

1.2.1

VadimDez commented 6 years ago

I'm confused, why would you pass a service?

console.log(this.orderPipe.transform(this._danePgee2017Service, this.order));

If you comment this line out, does it show you the same error?

Take a look at the example project: https://stackblitz.com/edit/angular-nck6db?file=app%2Fapp.component.ts

Guru992 commented 6 years ago

I change my appComponent to something closer to your example, but now i have an error: "Cannot read property 'slice' of undefined":

import { Component, OnInit } from '@angular/core';
import { Rider } from "../riders/rider";
import { Danepgee2017Service } from '../../danepgee2017.service';
import { OrderPipe } from 'ngx-order-pipe';

@Component({
  selector: 'gs-pgee2017-stats',
  templateUrl: './pgee2017-stats.component.html',
  styleUrls: ['./pgee2017-stats.component.less'],
})
export class Pgee2017StatsComponent {
pgee2017: Array<any>;
result: number[];
  constructor(private _danePgee2017Service: Danepgee2017Service,
    private orderPipe: OrderPipe) 
  {
this._danePgee2017Service.getPgee2017().subscribe(response => this.pgee2017 = response);
let copy = this.pgee2017.slice();
this.result = orderPipe.transform(copy, 'msc');
}
VadimDez commented 6 years ago

i've released new version 2.0.0, please update. I as well updated example for the new version: https://stackblitz.com/edit/angular-nck6db?file=app%2Fapp.component.ts

In order to make it work change your code to:

this._danePgee2017Service.getPgee2017().subscribe((response) => {
  this.pgee2017 = orderPipe.transform(response, 'msc');
});
Guru992 commented 6 years ago

Great! Works good now. Thank you! I have one additional question: in 'msc" column I have numbers from 1 to 55 (this is place in classification) and string "ns" which means "unclassified". When I try to sort it, column goes crazy and I receive different order after every single click. Starting position is always the same, but not good, because after 32 I have: 34, 35, 36, 37, 38, 39, ns, ns, ..., ns, 33, 40, 41, 42, .... Is there any solution to sort it right or this is not possible to mix numbers and strings values?

VadimDez commented 6 years ago

Closing this for now, since your original issue is solved.

Could you show me how your data looks like and which field should be sorted?

Guru992 commented 6 years ago

Field "MSC" should be sorted.

"data":[{"_id":"5a89c61759db01b1e7f36479","MSC":4},{"_id":"5a89c61759db01b1e7f3647a","MSC":5},{"_id":"5a89c61759db01b1e7f3647b","MSC":6},{"_id":"5a89c61759db01b1e7f3647c","MSC":7},{"_id":"5a89c61759db01b1e7f3647d","MSC":8},{"_id":"5a89c61759db01b1e7f3647e","MSC":9},{"_id":"5a89c61759db01b1e7f3647f","MSC":10},{"_id":"5a89c61759db01b1e7f36480","MSC":11},{"_id":"5a89c61759db01b1e7f36481","MSC":12},{"_id":"5a89c61759db01b1e7f36482","MSC":13},{"_id":"5a89c61759db01b1e7f36483","MSC":14},{"_id":"5a89c61759db01b1e7f36484","MSC":15},{"_id":"5a89c61759db01b1e7f36485","MSC":16},{"_id":"5a89c61759db01b1e7f36486","MSC":17},{"_id":"5a89c61759db01b1e7f36487","MSC":18},{"_id":"5a89c61759db01b1e7f36488","MSC":19},{"_id":"5a89c61759db01b1e7f36489","MSC":20},{"_id":"5a89c61759db01b1e7f3648a","MSC":21},{"_id":"5a89c61759db01b1e7f3648b","MSC":1},{"_id":"5a89c61759db01b1e7f3648c","MSC":2},{"_id":"5a89c61759db01b1e7f3648d","MSC":3},{"_id":"5a89c61759db01b1e7f3648e","MSC":22},{"_id":"5a89c61759db01b1e7f3648f","MSC":23},{"_id":"5a89c61759db01b1e7f36490","MSC":24},{"_id":"5a89c61759db01b1e7f36491","MSC":25},{"_id":"5a89c61759db01b1e7f36492","MSC":26},{"_id":"5a89c61759db01b1e7f36493","MSC":30},{"_id":"5a89c61759db01b1e7f36494","MSC":31},{"_id":"5a89c61759db01b1e7f36495","MSC":32},{"_id":"5a89c61759db01b1e7f36496","MSC":33},{"_id":"5a89c61759db01b1e7f36497","MSC":34},{"_id":"5a89c61759db01b1e7f36498","MSC":35},{"_id":"5a89c61759db01b1e7f36499","MSC":36},{"_id":"5a89c61759db01b1e7f3649a","MSC":37},{"_id":"5a89c61759db01b1e7f3649b","MSC":38},{"_id":"5a89c61759db01b1e7f3649c","MSC":39},{"_id":"5a89c61759db01b1e7f3649d","MSC":40},{"_id":"5a89c61759db01b1e7f3649e","MSC":41},{"_id":"5a89c61759db01b1e7f3649f","MSC":42},{"_id":"5a89c61759db01b1e7f364a0","MSC":43},{"_id":"5a89c61759db01b1e7f364a1","MSC":44},{"_id":"5a89c61759db01b1e7f364a2","MSC":45},{"_id":"5a89c61759db01b1e7f364a3","MSC":46},{"_id":"5a89c61759db01b1e7f364a4","MSC":47},{"_id":"5a89c61759db01b1e7f364a5","MSC":27},{"_id":"5a89c61759db01b1e7f364a6","MSC":28},{"_id":"5a89c61759db01b1e7f364a7","MSC":29},{"_id":"5a89c61759db01b1e7f364a8","MSC":48},{"_id":"5a89c61759db01b1e7f364a9","MSC":49},{"_id":"5a89c61759db01b1e7f364aa","MSC":50},{"_id":"5a89c61759db01b1e7f364ab","MSC":51},{"_id":"5a89c61759db01b1e7f364ac","MSC":52},{"_id":"5a89c61759db01b1e7f364ad","MSC":55},{"_id":"5a89c61759db01b1e7f364ae","MSC":53},{"_id":"5a89c61759db01b1e7f364af","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364b0","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364b1","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364b2","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364b3","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364b4","MSC":54},{"_id":"5a89c61759db01b1e7f364b5","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364b6","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364b7","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364b8","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364b9","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364ba","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364bb","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364bc","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364bd","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364be","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364bf","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364c0","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364c1","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364c2","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364c3","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364c4","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364c5","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364c6","MSC":"ns"},{"_id":"5a89c61759db01b1e7f364c7","MSC":"ns"}]}