跨越不同容器 div 的 ngFor 数据，长度为 4

Question

当长度达到四时，我想在新容器div中继续ngFor data。我在几个div 中硬编码数据似乎更容易，但现在我想使用 ngFor 动态获取数据以在多个容器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>
Run c

Answer 1

在*ngFordiv 的顶部取一个父div*ngIf。 因此，仅当长度为 4 时才会显示。

试试这个。

<div class="book-section-grid" *ngIf="books.length === 4">
<div *ngFor="let book of books" class="book-section-subGrid">
<img[src]="book.image" alt="">
<h4>{{book.title}}</h4>
<span>by <a href="#">{{book.name}}</a></span>
</div>
</div>

我认为您的书籍对象具有标题，名称和图像属性。

你的第一句话有点令人困惑。

我想在长度达到 4 时在新的容器div 中显示我的 ngFor 数据

如果您想要其他解决方案，请重写第一句话。

Answer 2

如果你不故意需要新的div，你可以绑定单个div

模板.html

<div class="book-section-grid">
<div *ngFor="let book of books" class="book-section-subGrid">
<img [height]="getHeight()" [width]="getWidth()" [src]="book.image" alt="">
<h4>{{book?.title}}</h4>
<span>by <a href="#">{{book?.name}}</a></span>
</div>
</div>

组件.ts

getHeight{
//set custom height based on design or bind in single method
return (this.books.length <=4)? 50 : 100 ;
}
getWidth{
//set custom width based on design
return (this.books.length <=4)? 60 : 110 ;
}