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

我沒有嘗試的代碼，所以告訴我，如果它的工作原理，如果你需要更多的幫助^ _^