javascript - Angular2'de nesne dizisini sırala

Angular2'de bir nesne dizisini sıralamakla ilgili sorunlarım var.

Nesne şu şekilde görünüyor:

[
  {
    "name": "t10",
    "ts": 1476778297100,
    "value": "32.339264",
    "xid": "DP_049908"
  },
  {
    "name": "t17",
    "ts": 1476778341100,
    "value": "true",
    "xid": "DP_693259"
  },
  {
    "name": "t16",
    "ts": 1476778341100,
    "value": "true",
    "xid": "DP_891890"
  }
]

Ve values değişkeninin içinde saklanıyor.

Tek istediğim, *ngFor döngüsünün bunu name özelliğine göre sıralamasını sağlamak.

<table *ngIf="values.length">
    <tr *ngFor="let elem of values">
      <td>{{ elem.name }}</td>
      <td>{{ elem.ts }}</td>
      <td>{{ elem.value }}</td>
    </tr>
</table>

Bunu borularla yapmayı denedim ama rezil bir şekilde başarısız oldum. Her türlü yardım takdir edilir.

Plunker bağlantısı: https://plnkr.co/edit/e9laTBnqJKb8VzhHEBmn?p=preview

Düzenle

Benim pipom:

import {Component, Inject, OnInit, Pipe, PipeTransform} from '@angular/core';

@Component({
  selector: 'watchlist',
  templateUrl: './watchlist.component.html',
  styleUrls: ['./watchlist.component.css'],
  pipes: [ ArraySortPipe ]
})
@Pipe({
  name: "sort"
})

export class ArraySortPipe implements PipeTransform {
  transform(array: Array<string>, args: string): Array<string> {
    array.sort((a: any, b: any) => {
      if (a < b) {
        return -1;
      } else if (a > b) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

Ve sadece pipe adını html dosyasına koyun:

<tr *ngFor="let elem of values | sort">

Cevap #1

Bu problemi bir pipe ile çözebilmenize rağmen, bir pipe'ın tekrar kullanılabilirliğinin sizin özel projenizde işe yarayıp yaramayacağını kendinize sormanız gerekir. Gelecekte diğer dizilerde veya diğer bileşenlerde nesneleri "name" anahtarına göre sıklıkla sıralamanız gerekecek mi? Bu veriler, bileşende basitçe sıralamayı zorlaştıracak kadar sık ve farklı şekillerde değişecek mi? Görünümde veya girişlerde herhangi bir değişiklik olduğunda diziyi sıralamanız gerekecek mi?

Dizinin bileşenin yapıcısında sıralandığı düzenlenmiş bir plunker oluşturdum, ancak bu işlevselliğin gerekirse yeniden kullanılmak üzere kendi yöntemine (örneğin sortValuesArray) taşınmasına engel olacak bir sebep yoktur.

constructor() {
  this.values.sort((a, b) => {
    if (a.name < b.name) return -1;
    else if (a.name > b.name) return 1;
    else return 0;
  });
}

Düzenlenmiş Plunker

Cevap #2

Bunu dene

A'dan alfabenin sonuna kadar sırala:

this.suppliers.sort((a,b)=>a.SupplierName.localeCompare(b.SupplierName));

Z=>A (ters sıra)

this.suppliers.sort((a,b)=>b.SupplierName.localeCompare(a.SupplierName));

Cevap #3

Borunuz string bekliyor ama nesneler alıyor, onu uyarlamalısınız:

export class ArraySortPipe implements PipeTransform {
  transform(array: Array<any>): Array<string> {
    array.sort((a: any, b: any) => {
      if (a.name < b.name) {
        return -1;
      } else if (a.name > b.name) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

Cevap #4

Angular, tıpkı AngularJS'te olduğu gibi, sıralama ve filtreleme için boruları kullanmamayı hâlâ tavsiye ediyor.

Uygulamanızı yavaşlatacak, bazı performans sorunlarına yol açacaktır. Bunu şablona geçirmeden önce sıralamanızı bileşeninizde sağlamak çok daha iyidir.

Sebep https://angular.io/guide/pipes#no-filter-pipe adresinde açıklanmıştır

Eğer iyi yapılandırılmış bir bileşen düzeni ile çalışırsanız bunu hatta ayarlayıcıda bile yapabilirsiniz:

 @Input()
  set users(users: Array<User>) {
    this.usersResult = (users || []).sort((a: User, b: User) => a.name < b.name ? -1 : 1)
  }

İlgili makaleler