Angular 4 - как отображать вновь созданные переменные в алфавитном порядке? - PullRequest
Новая
       5

Angular 4 - как отображать вновь созданные переменные в алфавитном порядке?

0 голосов
/ 03 октября 2018

Я должен отобразить все свои отчеты в алфавитном порядке. 

<ul class="reports-list" style="list-style-type:none;">
  <ng-container *ngFor="let report of reports | sort">
    <li id="report-number-{{report.id}}"><div id="report-button-{{report.id}}" class="btn report-name-button border-bottom standard-color" (click)="chooseReport(report)">{{ report?.name | translate }} </div>
    </li> 
  </ng-container>
</ul>

Я пытался использовать этот канал, но он не отображается в таком порядке: 

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
name: "sort"
     })
 export class ArraySortPipe {
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;
}

}

Кто-нибудь может мне помочь, пожалуйста?С уважением.

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

Если у вас есть "модель" для отчета (конечно, с именем свойства и идентификатором), ваш канал должен выглядеть следующим образом: 

import { Pipe, PipeTransform } from "@angular/core";
import { Report } from 'myModels/report'

@Pipe({
    name: "sort"
})
export class ArraySortPipe {
transform(array: Array<Report>, args: string): Array<Report> {
  array.sort((a: Report, b: Report) => {
    if (a.name < b.name) {
      return -1;
    } else if (a.name  > b.name ) {
      return 1;
    } else {
      return 0;
    }
  });
  return array;
}
}

В вашем коде ваш канал принимает массив строк, но в вашем шаблоневаше использование «report.id» не логично.

Если у вас нет модели отчета, просто измените отчет на {id: номер, имя: строка ...}

Далее вы отправляете трубкуделает огромные изменения в зависимости от размера массива, возможно, вы должны сделать его «чистым» для лучшей производительности. 

@Pipe({
    name: "sort",
    pure : true
})

https://angular.io/guide/pipes#pure-pipes

0 голосов
/ 03 октября 2018

Вам нужно указать свойство, по которому вы хотите отсортировать базу, потому что a,b параметры являются объектами

Попробуйте вот так 

import { Pipe, PipeTransform } from "@angular/core";

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

}
}

демонстрация stackblitz

...