查找最大div元素的高度并将其设置为所有div元素Angular 8 [英] Finding height of the largest div element and setting it for all div elements Angular 8
问题描述
我有一个div元素,该元素使用* ngFor遍历对象数组.特定div的高度彼此不同,因为每个对象包含不同数量的字数.我想获得最大的div元素的高度并将其设置为div高度,以便所有div元素看起来都一样.我正在使用Bootstrap 4.xx
I have a div element that is looped through an array of objects using *ngFor. The height of a particular div is different from each other as each object contains different amounts of word count. I want to get the largest div element's height and set it as the div height so all div elements look the same. I am using Bootstrap 4.xx
<div class="col-md-4" *ngFor="let food of foods">
<div class="food-card">
<h4>{{food.title}}</h4>
<p>{{food.ingredients}}</p>
</div>
</div>
成分中包含很多单词,每种食品的单词数都不一样.
Ingredients contain a lot of words in it and the word count varies from each food item.
推荐答案
您可以使用ViewChildren获取元素,并在ngAfterViewInit中获取大小
You can use ViewChildren to get the elements, and in ngAfterViewInit, get the size
<div class="col-md-4" *ngFor="let food of foods">
<div #foodcard class="food-card">
<h4>{{food.title}}</h4>
<p>{{food.ingredients}}</p>
</div>
</div>
@ViewChildren('foodcard') foodCards:QueryList<ElementRef>
ngAfterViewInit()
{
let maxHeight=0
this.foodCards.forEach(x=>{
const height=x.nativeElement.getBoundingClientRect().height
if (heigth>maxHeight)
maxHeight=height
})
}
无论如何,如果您的目标设置为相同的高度,请检查 card-deck
Anyway, if your aim is set the same height check card-deck
这篇关于查找最大div元素的高度并将其设置为所有div元素Angular 8的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!