无法在 Angular 中读取 null 的属性“getBoundingClientRect”答案

【问题标题】：Cannot read property 'getBoundingClientRect' of null in Angular无法在 Angular 中读取 null 的属性“getBoundingClientRect”
【发布时间】：2021-07-15 08:20:44
【问题描述】：

我正在尝试使用getBoundingClientRect().height 或this.elementView.nativeElement.offsetHeight 获取此<div class="bundles-wrap enterprise" 元素的像素高度。

这是我的 HTML：

<div class="row d-flex align-items-end" *ngFor="let value of valueList">
        <!--        start-->
          <div class="bundles-wrap enterprise" id="card-id" #card>
            <div class="hdr">
              <h2>{{value.Name}}</h2>
              <span>What you’ll get</span>
            </div>
</div>
</div>

这是我的组件类：

 valueList: Model[];
 @ViewChild('card', {read: ElementRef, static:false}) elementView: ElementRef;
    ngAfterViewInit(): void{
     this.loaderService.showLoader("shell-content-loader", "Processing…");
     this.getValueList();
    
    }
    
    getValueList(){
    this.service.getvalueDetails().subscribe(res => {
           this.valueList = res;
              if (this.valueList.length != 0) {
                this.loaderService.hideLoader("shell-content-loader");
                const height1 = document.getElementById('card-id').getBoundingClientRect().height;
                const height2 = this.elementView.nativeElement.offsetHeight;
                console.log(height1);
              }
            });
        
        }

我正在尝试获取height1, height2，但它显示Cannot read property 'getBoundingClientRect' of null in Angular。没有任何作用。

【问题讨论】：

您尝试通过其 id 获取元素，并且该元素位于循环内，因此它不会是唯一的。不是问题吗？
有解决办法吗？

标签： html angular getelementbyid getboundingclientrect offsetheight

【解决方案1】：

您正在尝试获取 ID 为 card-id 的元素。

您还在 *ngFor 中创建具有此 ID 的元素，因此多个元素将具有相同的 ID。

在您的代码中，您设置将在 ngFor 中使用的值，并且在搜索元素之后。因此，Angular 将找不到元素，因为它们尚未加载。

我建议您以不同的方式识别所有元素。你可以用特定的CSS class 来做，或者这样：

<div class="row d-flex align-items-end" *ngFor="let value of valueList">
    <div class="bundles-wrap enterprise" id="card-id-{{ value.ID }}" #card>
        <div class="hdr">
            <h2>{{value.Name}}</h2>
            <span>What you’ll get</span>
        </div>
    </div>
</div>

在棱角处：

valueList: Model[];

@ViewChild('card', {read: ElementRef, static:false}) elementView: ElementRef;
ngAfterViewInit(): void{
    this.loaderService.showLoader("shell-content-loader", "Processing…");
    this.getValueList();
}
    
getValueList(){
    this.service.getvalueDetails().subscribe(res => {
        this.valueList = res;
        this.loaderService.hideLoader("shell-content-loader");
        for(let vl of res) {
            const height1 = document.getElementById('card-id-' + vl.ID).getBoundingClientRect().height;
            const height2 = this.elementView.nativeElement.offsetHeight;
            console.log(height1);
        }
   });
}

【讨论】：

你解决了 height1 的问题，但我认为 height2 现在会因为同样的原因抛出。他也在多个元素上使用 ViewChild。
哦，是的，你是对的……但是 height1 和 height2 会一样吗？
确实，如果解决了height1，我想他就不再需要height2了，所以没关系
使用@ViewChildren，@ViewChild只得到第一个

【解决方案2】：

您可以将每个步骤的索引附加到您的 id：

<div class="row d-flex align-items-end" *ngFor="let value of valueList; let i = index">
          <div class="bundles-wrap enterprise" [attr.id]="'card-id' + i" #card>
            <div class="hdr">
              <h2>{{value.Name}}</h2>
              <span>What you’ll get</span>
            </div>
          </div>
</div>

在你的组件中：

this.service.getvalueDetails().subscribe(res => {
            this.valueList = res;
            if (this.valueList.length != 0) {
                this.loaderService.hideLoader("shell-content-loader");

                for (var i = 0; i < res.length; i++)  {
                    const height1 = document.getElementById('card-id' + i).getBoundingClientRect().height;
                    const height2 = this.elementView.nativeElement.offsetHeight;
                    console.log(height1);
                }
            }
        });

【讨论】：