html - 无法在 Angular 中读取 null 的属性“getBoundingClientRect”

Question

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

这是我的 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。没有工作。

Answer 1

您正在尝试使用 ID 获取元素card-id。

您还在 中创建具有此 ID 的*ngFor元素，因此多个元素将具有相同的 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);
        }
   });
}

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