离子2角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"); 
}); 

我没有尝试的代码，所以告诉我，如果它的工作原理，如果你需要更多的帮助^ _^