• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Angular 6 Problem z sortowaniem.

VPS Starter Arubacloud
0 głosów
493 wizyt
pytanie zadane 24 sierpnia 2018 w JavaScript przez wiwot Nowicjusz (190 p.)

Cześć, robię aplikacje w Angular 6 która pobiera dane z JSON API ma wyświetlić je w tablicy i po kliknięciu w nazwę dane mają się przesortować. Haczyk w tym że nie mogę używać żadnych dodatkowych bibliotek. 

Kod z ts

export class AppComponent implements OnInit {

  readonly ROOT_URL = '...';
  datas: Observable<Data[]>;

  constructor(private http: HttpClient) {
  }

  sortTable(parm) {
    /*this.datas.subscribe(item => item.sort());*/
    this.datas.subscribe(item => item.sort((a: any, b: any) => {
      return a[parm] - b[parm];
    }));
  }

  getDatas() {
    this.datas = this.http.get<Data[]>(this.ROOT_URL);
  }


  ngOnInit() {
    this.getDatas();


  }

}

Interfejs pobranych danych

export interface Data {
  long: string;
  perc: number;
  price: number;
}

i html

<div class="col-md-6">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col" (click)="sortTable(long)">Nazwa</th>
        <th scope="col">Cena</th>
        <th scope="col">Zmiana(24h)</th>
      </tr>
    </thead>
    <tbody *ngFor="let data of datas | async" style="font-size: 12px;">
      <tr>
        <td>{{ data.long }}</td>
        <td>{{ data.price }} $</td>
        <td>{{ data.perc }} %</td>
      </tr>
    </tbody>
  </table>
</div>

Proszę o pomoc bo już nie daję rady

komentarz 25 sierpnia 2018 przez ScriptyChris Mędrzec (190,190 p.)
Co konkretnie nie działa?
komentarz 25 sierpnia 2018 przez wiwot Nowicjusz (190 p.)
W tym momencie wyświetlenie posortowanych danych w tablicy

1 odpowiedź

+1 głos
odpowiedź 25 sierpnia 2018 przez Tomek Sochacki Ekspert (227,490 p.)
sortTable(parm) {
    this.datas.subscribe(item => item.sort((a: any, b: any) => {
      return a[parm] - b[parm];
    }));
  }

co Ty chcesz tutaj osiągnąć...?

Zmienna "datas" przechowuje Ci Observable, w inicjalizacji wypełniasz ją danymi z API i to jest oki. Pytanie po co tutaj to subscribe? Tymbardziej, że potem w widoku używasz async pipe co jest oki, bo zapewnia Ci m.in. unsubscribe na onDestroy itp.

Ale tutaj w kodzie powyżej to subscribe nie ma za bardzo sensu. Dlaczego nie użyjesz po prostu pipe i metody map Observable? Podmień zawartość datas na observable przesortowane jak tam sobie chcesz i poowinno działać.

W Angular 6 musisz pamiętać, ze operatory (np. map) muszą być owinięte w metodę pipe.

Podobne pytania

0 głosów
0 odpowiedzi 738 wizyt
pytanie zadane 19 sierpnia 2018 w JavaScript przez Tomek Reda Obywatel (1,110 p.)
0 głosów
4 odpowiedzi 1,009 wizyt
pytanie zadane 13 sierpnia 2018 w JavaScript przez Tomek Reda Obywatel (1,110 p.)
+2 głosów
0 odpowiedzi 388 wizyt

93,081 zapytań

142,045 odpowiedzi

321,464 komentarzy

62,427 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...