sortering - Angular, TypeError: Kan ikke lese egenskapen 'sort' av undefined

Jeg prøver å lage en sorteringsfunksjon og pipe for en tabell ved å følge denne lenken, og her er plunkeren for det eksempelet. Fra eksempelet jeg følger, skal tabellhodet være klikkbart og utføre sort()-funksjonen. Pipen min heter prdSort. Jeg bruker også ngx-pagination, men jeg tror ikke det er hovedårsaken til denne feilen.

//part of service.ts
productList: AngularFireList < any > ;
//end

//component.ts
productList: Product[];

isDesc: boolean = false;
column: string = 'prdName';
records = this.productList
sort(property) {
  this.isDesc = !this.isDesc; //change the direction    
  this.column = property;
  let direction = this.isDesc ? 1 : -1;
};
<!-- table header -->
<th (click)="sort('prdName')">Name</th>

<!--table row-->
<tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | prdSort: {property: column, direction: direction} ">

//pipe.ts

transform(records: any, args ? : any): any {

  return records.sort(function(a, b) {
    if (records !== undefined) {
      if (a[args.property] < b[args.property]) {
        return -1 * args.direction;
      } else if (a[args.property] > b[args.property]) {
        return 1 * args.direction;
      } else {
        return 0;
      }
    }
    return records;
  });
};

Jeg har allerede inkludert pipe-filen i app.module.ts. Vennligst gi beskjed hvis flere kodesnutter er nødvendig.

Svar #1

Prøv å initialisere produktlisten din med en tom matrise:

// component.ts:

productList: Product[] = [];

For mer sikkerhet, for å forhindre å kalle array.prototype.sort på en variabel som er udefinert i stedet for et array, kan du legge til koden nedenfor i filteret ditt:

transform(records: any, args ? : any): any {
    records = records || [];  // set records to an empty array if undefined
    return records.sort(function(a, b) { ... });
}

Svar #2

Som @Faly svarte dette nesten perfekt, men din bruk av pipe er ugyldig etter min gjetning.

Fra dette

<tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | prdSort: {property: column, direction: direction} ">

Bytt til dette

<tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | prdSort: column : direction ">

(Passerte argumenter endret.)

Også fra @Faly

transform(records: any, args ? : any): any {
    records = records || [];  // set records to an empty array if undefined
    return records.sort(function(a, b) { ... });
}

Forklaring: Når du ser på feilen din ERROR TypeError: Cannot read property 'sort' of undefined at PrdSortPipe.transform prøver du å bruke sort-funksjonen på undefined på grunn av, antar jeg, feil overførte argumenter til pipe. Så pipen din får en undefined-verdi som sort-metoden ikke kan kjøres på. Se på dette svaret om flere argumenter i pipe.

Relaterte artikler