Question

我想获得我在几个组件中使用的div的高度，我的HTML看起来几乎如下：

<div  #dataHeadlines *ngFor="let group of catt" [ngClass]='hf(dataHeadlines)'>
        <h4>{{ group }}</h4>
            <nlr-child-headlines [data]=sortedData [title]=group></nlr-child-headlines> 
    </div>

我打电话的功能如下：

hf(element) {
        //setTimeout(() => { 
        this.height = element.offsetHeight;
        console.log("juliet function height = " + this.height);
        //},0);
    }

由于信息是异步的，因此我将所有值都归零。但是当我删除注释标记时，setTimeout（）函数会运行，并为我提供我想要的值，但它只是像我3岁那样继续...

如何让它停止！如果你可以帮助解决那个也很好的setTimeout（）问题......

Answer 1

绑定到模板中的函数会导致函数在每次更改检测转弯时运行（这种情况经常发生）。

最好将结果分配给属性并改为绑定到此属性。

hf(element) {
    //setTimeout(() => { 
    this.height = element.offsetHeight;
    console.log("juliet function height = " + this.height);
    this.someCssClass = 'xxx';
    //},0);
}

<div  #dataHeadlines *ngFor="let group of catt" [ngClass]='someCssClass'>

我无法从您提供的信息中了解，从hf()拨打电话的好地方。通常它是某种事件（生命周期回调，可观察事件，......）

Answer 2

以下操作将触发自动更改检测。

活动 - 用户事件，例如点击，更改，输入，提交，... XMLHttpRequests - 例如从远程服务获取数据时计时器 - setTimeout（），setInterval（），因为JavaScript

因此setTimeout触发更改，然后调用hf（）并继续循环。

您应该将ngClass绑定到变量而不是函数调用，Angular将为您处理所有内容。

setTimeout（）卡在一个无休止的循环中

2 个答案: