javascript - ngFor 루프 사이에 항목 삽입

*ngFor 의 색인을 추적 할 수 있습니다   let i = index 를 사용하여 그런 다음 *ngIf 를 사용할 수 있습니다  인덱스가 위치 3에있을 때 작업을 수행합니다. 아래를 참조하여 <pre></pre> 를 사용했습니다.  무슨 item 몰라 때문에  입니다.

<ul>
    <li *ngFor="let item of items; let i = index">
        <pre *ngIf="i !== 2; then thenBlock else elseBlock"></pre>
    </li>
</ul>
<ng-template #thenBlock>{{item}}</ng-template>
<ng-template #elseBlock>//Display something for item 3</ng-template>

귀하의 HttpGet이 잘못되었습니다. 새로운 HttpClient 를 사용하고 있다고 가정합니다. 이어야합니다 :

this.http.get<any>('/api/items').subscribe((data: any) => {
      this.items = data;
});

오래된 Http 라면 :

this.http.get('/api/items')
    .map((res: Response) => res.json())
    .subscribe((data: any) => {
        this.items = data;
     });

의견에 따르면 실제로 다음과 같은 것이 필요합니다 :

<ul>
  <ng-container *ngFor="let item of items; let i = index">
    <li>{{item}}</li>
    <li *ngIf="i === 2">...</li>
  </ng-container>
</ul>

요소 자체가 아닌 컨테이너 위의 루프에 유의하십시오. 따라서 각 단계마다 레이아웃을 어지럽히 지 않고 다양한 요소를 가질 수 있습니다.

<ul>
   <li *ngFor="#item of items; let i = index" [attr.data-index]="i"">
       <span *ngIf="i == 2"> this is third element {{item}} <span>
       <span *ngIf="i != 2"> {{item}} <span>
   </li>
</ul>