重新排序数组打字稿答案

【问题标题】：Reorder Array Typescript重新排序数组打字稿
【发布时间】：2023-03-16 23:15:01
【问题描述】：

是否可以在 HTML 中添加一个按钮，将列表项之一推到列表末尾？

所以喜欢重新排列列表，而不是拖放；但是当按下第一个按钮时，即被推到列表的末尾。

非常感谢您的帮助。这是打字稿的一部分：

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>

【问题讨论】：

我不想为您编写代码，但您可能想查看 array.splice() 然后 array.push() 方法。哦，这是什么鬼主意：items = Object.assign({}, array); array.splice(0, 1); array.push(items[0]);

标签： arrays typescript ionic-framework ionic3

【解决方案1】：

如果您只关心将第一项推到列表末尾，则可以这样做：

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 playground。

【讨论】：

感谢您的宝贵时间，但不幸的是，它没有用。我收到“接口”是意外标记的错误。另外，当我将这些行添加到点击事件时，它似乎也不起作用。
如果 interface 是一个意外的标记，这意味着你没有使用 TypeScript。我添加了一个指向 TypeScript Playground 的链接。你可以在那里看到生成的 JavaScript。

【解决方案2】：

我能够用这些行来解决它：

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>

希望这对遇到同样问题的人有所帮助:)

【讨论】：