Question

读一本书我遇到了一个在同一个模板中使用相同的* 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>

这是 db-category-slide

的模板

<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>();

Answer 1

更改您的Indicators HTML，如下所示：

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

在模板

1 个答案: