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");
});

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

离子2角度2离子列表随机洗牌没有ngFor

1 个答案: