角4の無限配列ループ

Question

* ngForを使用して、配列要素を何回か繰り返す必要があります。コンポーネントで

：テンプレートで

letters: Array<string> = [a, b, c, d, e]; 
currentLetter: string= c; 

：このような私が見たい

<div *ngFor="let letter of letters" (click)="currentLetter = letter">{{letter}}</div> 

そして、このようなものがでレンダリング：

、B、C、D、 e

「a」をクリックした後：

D、E、A、B、

Cと 'E' をクリックした後：

C、D、E、

任意のアイデアをb？ :) 助けてくれてありがとう！

Answer 1

それはあなたの問題

<div *ngFor="let letter of letters" (click)="myMethod(letter)">{{letter}} 
</div> 


myMethod(selectedLetter){ 
    let postLen = 3; // configurable 
    let i=0, len =str1.length; 
    let foundFlag = false; 
    let arr1 = [], arr2 = [], arr3 = []; 
    for(;i<len;i++){ 
     if(str1[i] == selectedLetter){ 
      for(k=0;k<postLen && (i+k)< len ; k++){ 
       arr1.push(str1[i+k]); 
       i++; 
      } 
      foundFlag = true; 
     }else if(!foundFlag){ 
       arr2.push(str1[i]); 
     }else{ 
       arr3.push(str1[i]); 
     } 

    } 

    this.letters = arr3.concat(arr2); 
    this.letters = this.letters.concat(arr1); 

} 

を解決します、これを試してみてください

Answer 2

ngIfの2つのリストを使用してください。最初のリストはcurrentLetterまたはcurrentLetterの前に文字をレンダリングし、2番目のリストはcurrentLetterの後の文字をレンダリングします。

<ng-container *ngFor="let letter of letters; index as i"> 
    <button *ngIf="i>=letters.indexOf(currentLetter)" (click)="currentLetter = letter">{{letter}}</button> 
</ng-container> 
<ng-container *ngFor="let letter of letters; index as i"> 
    <button *ngIf="i<letters.indexOf(currentLetter)" (click)="currentLetter = letter">{{letter}}</button> 
</ng-container>