查找最大 div 元素的高度并将其设置为所有 div 元素 Angular 8 [英] Finding height of the largest div element and setting it for all div elements Angular 8

问题描述

我有一个使用 *ngFor 循环遍历对象数组的 div 元素.特定 div 的高度彼此不同，因为每个对象包含不同数量的字数.我想获得最大的 div 元素的高度并将其设置为 div 高度，以便所有 div 元素看起来都一样.我正在使用 Bootstrap 4.xx

<div class="food-card"><h4>{{food.title}}</h4><p>{{food.ingredients}}</p>

成分中包含很多单词，并且每个食物的单词数都不同.

解决方案

可以使用ViewChildren获取元素，在ngAfterViewInit中获取大小

<div #foodcard class="food-card"><h4>{{food.title}}</h4><p>{{food.ingredients}}</p>

@ViewChildren('foodcard') foodCards:QueryListngAfterViewInit(){让 maxHeight=0this.foodCards.forEach(x=>{const height=x.nativeElement.getBoundingClientRect().height如果(高度>最大高度)最大高度=高度})}

无论如何，如果您的目标设置为相同的高度，请检查 card-deck

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.

解决方案

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

}

Anyway, if your aim is set the same height check card-deck

这篇关于查找最大 div 元素的高度并将其设置为所有 div 元素 Angular 8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！