Ionic 2 Angular 2 没有 ngFor 的离子列表随机洗牌

Question

我有一个这样的列表：

<ion-list>
    <ion-item>item A</ion-item>
    <ion-item>item B</ion-item>
    <ion-item>item C</ion-item>
<ion-list>

如何在渲染前随机播放？请注意，我们没有使用 ngFor。

Answer 1

回答很简单，你看看那个shuffle technic就可以了。这样你就可以在渲染之前随机排序你的数组。在您的组件中创建以下函数。

private buildArray(array) {
  return new Promise(resolve => {
    let m = array.length, t, i;

    // While there remain elements to shuffle…
    while (m) {

      // Pick a remaining element…
      i = Math.floor(Math.random() * m--);

      // And swap it with the current element.
      t = array[m];
      array[m] = array[i];
      array[i] = t;
    }

    this.myArray = array;
    resolve(true);
  });
}

然后，在你的构造函数中你可以做类似的事情：

this.buildArray(this.myArray);

然后渲染它，你有多种选择，你现在可以使用 *ngFor 因为你的数组是随机排序的，但如果出于任何其他原因你更喜欢制作渲染功能，请执行以下操作：

<ion-list id="myArrayList"><ion-list>

制作渲染函数：

private renderArray(array, id){
  let item;
  let textItem;
  let i = -1;

  while(array[++i]) {
    item     = document.createElement("ion-item"); // Create item
    textItem = document.createTextNode(array[i].value); // Create item content

    item.appendChild(textItem);
    document.getElementById(id).appendChild(item);
  }
}

最后按以下方式修改您的构造函数：

this.buildArray(this.myArray).then(() => {
  this.renderArray(this.myArray, "myArrayList");
});

我没有尝试过该代码，请告诉我它是否有效以及您是否需要更多帮助^_^

Ionic 2 Angular 2 没有 ngFor 的离子列表随机洗牌

Ionic 2 Angular 2 ion-list random shuffle without ngFor

random

shuffle

ionic2

ngfor

angular