Angular2 * ngFor循环获取每个循环的高度（仅获取第一个）

Question

我有一个像这样的ngFor循环：<div *ngFor="let group of catt" id="juliet" [ngClass]="hf()">我每次都调用hf（）函数，看起来像这样：

hf() {
    this.heighty = document.getElementById('juliet').offsetHeight;
    console.log("juliet function height = " + this.heighty);

  }

但for循环经历了4次数据，但只给出了第一个循环的高度，然后为每个循环提供相同的高度。当我检查元素时，我看到4个不同高度的循环。我也没有看到每个循环的标识符，例如juliet[0]。如何获得for循环的每个循环的高度？

Answer 1

不要使用id，因为它会在页面上多次重复该DOM（尽管document.getElementById('juliet')将是元素的第一个实例），而是使用如下所示的模板变量#juliet

<div *ngFor="let group of catt" #juliet [ngClass]="hf(juliet)">

然后通过在juliet方法中传递hf来计算每个DOM的高度。

hf(element) {
    this.heighty = element.offsetHeight;
   console.log("juliet function height = " + this.heighty);
}