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

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

简单地说，您应该看一下洗牌技术。这样，您就可以在渲染数组之前对其进行随机排序。在组件中创建以下函数:

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

然后渲染它，你有多个选项，你可以使用* ng目前，因为你的数组是随机排序的，但如果出于任何其他原因，你更喜欢做一个渲染函数，做以下操作:

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

我没有试过那个代码，所以告诉我它是否有效，如果你需要更多的帮助^_^