當長度達到四時，在新的容器 div 中顯示 ngFor 數據

Question

當長度達到 4 時，我需要一些幫助才能在新的容器 div 中顯示我的 ngFor 數據。 在多個 div 中硬編碼數據更容易，但使用 ngFor 會在單個容器 div 中顯示數據。

下面的代碼應該在book-section-grid DIV中有四個book-section-subGrid 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 。

您可以在此處找到示例實現。