当长度达到四时，在新容器 div 中显示 ngFor 数据

Question

当长度达到四时，我需要一些帮助才能在新容器 div 中显示我的 ngFor 数据。在多个 div 中硬编码数据更容易，但使用 ngFor 将数据显示在单个容器 div 中。

下面的代码应该有四个 book-section-subGrid DIV 在一个 book-section-grid DIV

我的尝试

<div class="book-section-grid">
    <div *ngFor="let book of books" class="book-section-subGrid">
      <img src="assets/images/book1-1.png" alt="">
      <h4>{{book?.title}}</h4>
      <span>by <a href="#">Michael Freeman</a></span>
    </div>
</div>

我想要达到的目标

.book-section-grid {
  display: flex;
  margin-bottom: 100px;
}

<!-- 1st Section -->
<div class="book-section-grid">
  <div class="book-section-subGrid">
    <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>

  <div class="book-section-subGrid">
    <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>

  <div class="book-section-subGrid">
    <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>

  <div class="book-section-subGrid">
    <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>
</div>

<!-- 2nd Section -->
<div class="book-section-grid">
  <div class="book-section-subGrid">
    <img height="100" width="100" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>

  <div class="book-section-subGrid">
    <img height="100" width="100" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>

  <div class="book-section-subGrid">
    <img height="100" width="100" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>

  <div class="book-section-subGrid">
    <img height="100" width="100" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
    <h4>Photographer’s trouble shooter</h4>
    <span>by <a href="#">Michael Freeman</a></span>
  </div>
</div>

Answer 1

这样试试

 <div class="book-section-grid">
    <div *ngFor="let book of books; let index = index;" class="book-section-subGrid">
        <div *ngIf="index < 5; else elseBlock">
          <h4>{{book?.title}}</h4>
          <img  height="100" width="100" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
          <span>by <a href="#">Michael Freeman</a></span>
        </div>
        <ng-template #elseBlock>
          <h1>{{book?.title}}</h1>
          <img  height="50" width="50"src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
          <span>by <a href="#">Michael Freeman</a></span>
        </ng-template>

    </div>
  </div>

Answer 2

我认为你可以使用 angular slice pipe。

您可以找到示例实现here。