如何找到 Angular 7 div 的动态高度？

如何解决如何找到 Angular 7 div 的动态高度？

我只是想通过 console.log 记录一个 div 的高度，这是基于它根据里面的表格扩展的大小。我需要它来确定是否会出现滚动条（这包含在弹出的对话框中）。

目前我正在努力显示 div 中设置的高度，但它不会根据表格进行更新。有什么想法让我搞砸了吗？

HTML

<mat-dialog-content style="height: 460px">

  <div #target style="height:100px">
<table  class="responstableModt">
  <tr *ngFor="let result of results; let x = index">
    <td width="9%" style="text-align: right">{{ result.AMT_OWED | number : '1.2-2' }}  </td>
    <td width="9%" style="text-align: right">{{ result.AMT_PAID | number : '1.2-2' }}  </td>
      </tr>
    </table>
    </div>

 
      
    </mat-dialog-content>

组件

import { AfterViewInit,Component,OnInit,ViewChild} from '@angular/core';
import {MatDialogRef,MAT_DIALOG_DATA} from '@angular/material/dialog';
import { Inject } from '@angular/core';
import { DbService } from '../db.service';
import { ActivatedRoute } from '@angular/router';
import { Router } from '@angular/router';
import { IssuerService } from '../../issuer.service';
import { HostListener,ElementRef } from '@angular/core';

@Component({
  selector: 'app-cf-iteration-dialog',templateUrl: './cf-iteration-dialog.component.html',styleUrls: ['../global.css']
})

export class CfIterationDialogComponent implements OnInit {

  constructor(
    private DbService: DbService,public dialogRef: MatDialogRef<CfIterationDialogComponent>,@Inject(MAT_DIALOG_DATA) public data: any) { }


  onNoClick(): void {
    this.dialogRef.close();
  }


    runGetData(repid,issuerid,iterid) {
      return new Promise((resolve) => {
        this.DbService.GetData(repid,id,iterid).subscribe(results => this.results = results,(err) => { 
          console.log('ERROR: ' + JSON.stringify(err)); 
      },() => {
        this.IterDiabled = false;
        // Get the height of the element
        const height = this.targetElement.nativeElement.offsetHeight;

        // Here you can use the height!
        this.result = height;
        console.log('x: ' + height);
        resolve(1);});})
      }
  

  async ngOnInit() {
    // Get Details Data
    try { await this.runGetData(this.repid,this.id,this.iterid)
    } catch (e) {console.log('Try/Catch Error: ' + e)}

   }

   @ViewChild('target') targetElement: any;    
   result: string;

}

目前不管怎样，它都能控制 100 台。

解决方法

您是否尝试使用角材料的布局属性？ :

https://tburleson-layouts-demos.firebaseapp.com/#/docs

在这种情况下，如果您想要 100% 的高度，则只需使用“stretch”属性即可。

如果你使用的是 Angular，你绝对应该使用 Angular 材质，它很容易实现，你可以用分页器设置行数（对我来说比滚动条好一点）：

https://material.angular.io/components/table/overview