템플릿에서 같은 * ngFor 루프 사용

Question

책 읽기 동일한 템플릿에서 동일한 * ngFor 루프를 두 번 사용하는 예제를 발견했습니다. 중첩 된 구성 요소로 침입하여 작동하지 않는 'i'변수를 리팩토링하려고했습니다.

이 예제는 부트 스트랩 캐 러셀을 사용하며 표시기 단추와 슬라이드 쇼 모두에 대해 범주를 반복해야합니다.

같은 루프를 반복하지 않는 더 나은 방법을 알고 있습니까? 당신의 Indicators HTML을 변경

@Input() category: Category; 
@Output() select: EventEmitter<Category> = new EventEmitter<Category>(); 

Answer 1

:

<!-- Indicators --> 
<ol class="carousel-indicators"> 
    <li data-target="#welcome-products" 
     *ngFor="let category of slideCategories;let first=first; let i=index" 
     attr.data-slide-to="{{i}}" [ngClass]="{active: first}"></li> 
</ol> 

<!-- Content --> 
<div class="carousel-inner" role="listbox"> 

    <div *ngFor="let category of slideCategories;let first=first" 
     class="carousel-item" [ngClass]="{active: first}"> 
    <db-category-slide 
     [category]="category" (select)="selectCategory($event)"> 
    </db-category-slide> 
    </div> 

이

은

<div class="card"> 
<img class="card-img-top img-fluid center-block product-item" src="{{category.image}}" alt="{{category.title}}"> 
<div class="card-block"> 
    <h4 class="card-title">{{category.title}}</h4> 
    <p class="card-text">{{category.desc}}</p> 
    <button class="btn btn-primary" (click)="browse()">Browse</button> 
</div> 
</div> 

구성 요소가 동일한 입력/출력을 가지고 같이 DB-카테고리 슬라이드에 대한 템플릿입니다 아래와 같이 :

<ol class="carousel-indicators"> 
    <li data-target="#welcome-products" 
     *ngFor="let category of slideCategories;let first=first; let i=index" 
     [attr.data-slide-to]="i" [ngClass]="{active: first}"></li> 
</ol>