>

항목을 표시하는 다음 코드가 있습니다

<ul>
<li *ngFor="#item of items">{{item}}</li>
</ul>

이제 items 객체는 API에 대한 http 호출의 결과로 얻는 것입니다.

이 코드는 다음과 같습니다.

this.http.get('/api/items').subscribe(data => {
      this.items= data['results'];
});

내가 이루고 싶은 것은 세 번째 아이템이 커스텀 아이템이되고 다음 아이템을 정상적으로 렌더링하는 것입니다.

어떻게이 문제를 해결할 수 있습니까?

감사합니다


  • 답변 # 1

    *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;
         });
    
    

  • 답변 # 2

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

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

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

  • 답변 # 3

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

  • 이전 android - Retrofit2를 사용하여 원시 데이터를 Python 스크립트로 보내는 방법
  • 다음 ember.js - emberjs - this_super (… arguments)에서… arguments는 무엇을 의미합니까?