Angular 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> 

而且我想看到的东西像这样渲染：

A，B，C，d， e

并点击'a'后：

d，E，A，B，C

，并点击 'E' 之后：

C，d，E，A，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的列表：第一个列表呈现currentLetter或currentLetter之前的字母本身，而第二个列表呈现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>