각도 2 | * ngFor 루프는 실행시 새로운 arraylist를 생성합니다.

Question

동일한 배열을 사용할 때 어떻게 루프의 인덱스를 0으로 되돌릴 수 있습니까? 내 TS에서

내가 이런 일을 표시 할

<ng-container *ngFor="let apidata of data; let i = index"> 
    <span *ngIf="apidata.group == 'one'">{{apidata.name}} | {{i}} 
<ng-container> 

<ng-container *ngFor="let apidata of data; let i = index"> 
    <span *ngIf="apidata.group == 'two'">{{apidata.name}} | {{i}} 
<ng-container> 

내 html 파일에

data = [{name: 'A', group: 'one'},{name: 'B', group: 'one'},{name: 'C', group: 'two'},{name: 'D', group: 'two'},{name: 'E', group: 'two'}]; 

파일. 새로운 NG-컨테이너에 전달되는 때 당신이 내 인덱스를 다시 다시 볼 수

<span>A | 1</span> 
<span>B | 2</span> 
<span>C | 1</span> 
<span>D | 2</span> 
<span>E | 3</span> 

지금까지 내가 항상이 실제 결과

<span>A | 1</span> 
<span>B | 2</span> 
<span>C | 3</span> 
<span>D | 4</span> 
<span>E | 5</span> 

을 얻을

Answer 1

귀하의 문제는 단순히 아래 논리를 사용하여 해결 될 수있다 성분 코드 아래

1)

export class AppComponent implements OnInit { 
    public data = [{name: 'A', group: 'one'},{name: 'C', group: 'two'},{name: 'B', group: 'one'},{name: 'D', group: 'two'},{name: 'E', group: 'two'}]; 

    ngOnInit() { 
    this.data = this.groupByData(this.data); 
    } 

    private groupByData(data): any { 
    const groups = ['one', 'two']; 
    return data.sort((item1, item2) => { 
     if (item1.group === item2.group) { 
     return 0; 
     } else if (groups.indexOf(item1.group) < groups.indexOf(item2.group)) { 
     return -1; 
     } else { 
     return 1; 
     } 
    }); 
    } 
} 

<ng-container *ngFor="let apidata of data; let i = index"> 
    <span>{{apidata.name}} | {{i + 1}}</span> 
</ng-container>