Angular 6升级至15后jQuery.each中this指向错误导致height获取失败

错误原因 #

在jQuery的.each()回调中使用箭头函数会导致this指向异常。箭头函数不会绑定自身的this，它会继承外部作用域的this（此处为你的服务类实例），而非当前遍历的DOM元素。升级jQuery后，这种指向错误触发了Cannot read properties of undefined (reading 'defaultView')报错。

修复方案 #

方案1：改用普通函数作为.each()回调 #

将箭头函数替换为普通函数，此时this会指向当前遍历的DOM元素：

setElHeight(element: any) {
    element.height('auto');
    if (element.length) {
        let maxheight: number = 0;
        element.each(function() {
            // 此处this指向当前遍历的DOM元素
            let max_height = $(this).height() ?? 0;
            maxheight = max_height > maxheight ? max_height : maxheight;
        });
        element.height(maxheight);
    }
}

方案2：通过.each()的参数获取当前元素 #

如果偏好使用箭头函数，可以利用.each()回调的第二个参数（当前DOM元素）来获取目标元素：

setElHeight(element: any) {
    element.height('auto');
    if (element.length) {
        let maxheight: number = 0;
        element.each((index: number, el: HTMLElement) => {
            // el是当前遍历的DOM元素
            let max_height = $(el).height() ?? 0;
            maxheight = max_height > maxheight ? max_height : maxheight;
        });
        element.height(maxheight);
    }
}

为什么替换成$(element)不行？ #

element是传入的整个jQuery集合（所有匹配的.div .content h4元素），而非单个元素，所以$(element).height()只会获取集合中第一个元素的高度，导致后续元素的高度未被正确计算，出现部分内容高度错误的问题。

内容的提问来源于stack exchange，提问作者Dev Developer