Чтение книги Я наткнулся на пример, который использует тот же цикл * ngFor дважды в том же шаблоне. Я попытался реорганизовать разбивку на вложенные компоненты и посылая переменную «i», которая не сработала.Использование тех же * ngFor циклов в шаблоне
В этом примере используется карусель для начальной загрузки и требуется прокрутка категорий для кнопок индикаторов и слайд-шоу.
Знаете ли вы, что лучший способ написать это, не повторяя тот же цикл?
<!-- 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>
компоненты имеют один и тот же вход/выход и выглядеть следующим образом:
@Input() category: Category;
@Output() select: EventEmitter<Category> = new EventEmitter<Category>();
Я поднимусь, так как мы должны связываться. Но это не устраняет проблему. Я думаю, потому что карусель-индикаторы должны быть вне карусели, чтобы работать по какой-то причине. – venturz909