Как сортировать массив с объектом по свойству использовать ngFor - PullRequest
Новая
       12

Как сортировать массив с объектом по свойству использовать ngFor

0 голосов
/ 14 мая 2019

Не удается отобразить в таблице данные сортировки 

js

let array = [
{idx: number, name: string, btn: number, index: number},
{idx: number, name: string, btn: number, index: number},
{idx: number, name: string, btn: number, index: number}
]

html

<tr *ngFor="let ticket of array">
<td>{{ticket.name}}</td>
<td>{{ticket.btn}}</td>
<td>{{ticket.index}}</td>
<tr>

Мне нужно отображение сортировки по значению индекса

Ответы [ 4 ]

1 голос
/ 14 мая 2019

Вы можете просто использовать сортирующие массивы: 

function sortFunc(a, b) {
  if ( a.index < b.index ){
    return -1;
  }
  if ( a.index > b.index ){
    return 1;
  }
  return 0;
}

let array = [
  {idx: number, name: string, btn: number, index: number},
  {idx: number, name: string, btn: number, index: number},
  {idx: number, name: string, btn: number, index: number}
].sort(sortFunc);

Или вы можете использовать lodash orderBy https://lodash.com/docs/4.17.11#orderBy

1 голос
/ 14 мая 2019 
let array = [
  { idx: 1, name: 'a', btn: 1, index: 2 },
  { idx: 2, name: 'b', btn: 2, index: 3 },
  { idx: 3, name: 'c', btn: 3, index: 1 }
];

// descending
let newarr = array.sort((a, b) => b.index - a.index);

//ascending
let newarr = array.sort((a, b) => a.index - b.index);

console.log(newarr);
0 голосов
/ 14 мая 2019

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

<tr *ngFor="let ticket of array|sort-pipe">
   <td>{{ticket.name}}</td>
   <td>{{ticket.btn}}</td>
   <td>{{ticket.index}}</td>
<tr>

в сортировке, вы можете использовать: 

 array.sort(function(obj1, obj2) {
   return obj1.idx > obj2.idx;
});
0 голосов
/ 14 мая 2019

Здесь доступна библиотека каналов OrderBy.
https://github.com/VadimDez/ngx-order-pipe

 npm install ngx-order-pipe --save
...