Изменить порядок массива Typescript

Question

Можно ли добавить в HTML кнопку, которая будет выдвигать один из элементов списка в конец списка?

Так же, как изменить порядок списка, но не перетаскивать;но когда кнопка нажата, первая, т. е. перемещается в конец списка.

Я бы действительно хотел помочь.Это часть typcipt:

cardz: Array< {}>; 
constructor(public navCtrl: NavController, public navParams: NavParams, public alerCtrl: AlertController, public toastCtrl: ToastController) {

this.cardz = [

  {id: '2', name: 'Trainer A', code: 1, isrc: "assets/img/t2.jpg", ppsrc: "assets/imgs/a.jpeg"},

  {id: '1',name: 'Trainer B', code: 2, isrc: "https://i.imgur.com/bbtiwSH.gif", ppsrc: "assets/imgs/b.jpeg"},

  {id: '3',name: 'Luan B.', code: 3, isrc: "https://i.imgur.com/S9pDBNv.gif", ppsrc: "assets/imgs/pp.jpg"},

  {id: '4',name: 'Trainer D', code: 4, isrc: "https://i.imgur.com/1v9LkYa.gif", ppsrc: "assets/imgs/pp1.jpg"},

  {id: '5',name: 'Trainer E', code: 5, isrc: "https://i.imgur.com/Xkvlm4B.gif", ppsrc: "assets/imgs/one.jpeg"}

А вот HTML:

<ion-list no-lines>
<ion-card *ngFor="let thing of cardz; let i = index;">
    <ion-item>
        <ion-avatar item-start>
            <img src="{{thing.ppsrc}}">
        </ion-avatar>
        <h2 (click)="openHome()">{{thing.name}}</h2>
        <p>23 Jan 2019</p>
    </ion-item>
    <img class="big" src={{thing.isrc}}>
  <ion-card-content>
    <h1>{{thing.title}}</h1>  
    <p>{{thing.content}}</p>
  </ion-card-content>
</ion-card>
</ion-list>

Answer 1

Я смог решить эту проблему с помощью следующих строк:

later (no){
 var item = this.cardz[no];
this.cardz.splice(no,1);
this.cardz.push(item);
}

И в HTML мне просто нужно было добавить i

<button ion-button icon-start clear small (click)="later(i)">
<ion-icon name="alarm"></ion-icon>
<div>Do later...</div>
</button>

Надежды - это поможет любому, у кого такая жепроблема:)

Answer 2

Если вам нужно только поместить первый элемент в конец списка, это можно сделать так:

const reorderedCardz =
  cardz
    .slice(1) 
    .concat(head(cardz));

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

interface NonEmptyArray<T> extends Array<T> {
  0: T;
}

function head<T>(collection: NonEmptyArray<T>): T {
  return collection[0];
}

Наша модель теперь выглядит так:

interface Card {
    id: string;
    name: string;
    code: number;
    isrc: string;
    ppsrc: string;
}

const cardz: NonEmptyArray<Card> = [
  {id: '2', name: 'Trainer A', code: 1, isrc: "assets/img/t2.jpg", ppsrc: "assets/imgs/a.jpeg"},
  {id: '1',name: 'Trainer B', code: 2, isrc: "https://i.imgur.com/bbtiwSH.gif", ppsrc: "assets/imgs/b.jpeg"},
  {id: '3',name: 'Luan B.', code: 3, isrc: "https://i.imgur.com/S9pDBNv.gif", ppsrc: "assets/imgs/pp.jpg"},
  {id: '4',name: 'Trainer D', code: 4, isrc: "https://i.imgur.com/1v9LkYa.gif", ppsrc: "assets/imgs/pp1.jpg"},
  {id: '5',name: 'Trainer E', code: 5, isrc: "https://i.imgur.com/Xkvlm4B.gif", ppsrc: "assets/imgs/one.jpeg"}
];

И наша функция переупорядочения:

function reorder<T>(collection: NonEmptyArray<T>) {
    return (
        collection
          .slice(1)
          .concat(head(collection)) as NonEmptyArray<T>
    )
}

Использование:

const reorderedCardz = reorder(cardz);

См. Игровая площадка TypeScript .