在使用 getElementById 的元素上使用 ngClass，元素为空

Question

我有一个带有 overflow: auto 的 html 元素，但我只想在它可滚动时给它一个边框。

如何在 ngClass 中评估元素的大小而不会出现任何类型的 null 错误？

注意：元素的封闭 div 直到从 observable 获得响应后才会被渲染。

尝试 1：

html元素是这样设置的：

<div ngIf="!loading">
    <div id="{{someID}}" [ngClass]="{'border-class': isScrollable}"> ... </div>
</div>

在我的 ngOnInit 中，我调用了一个函数来查看给定的元素是否可以滚动。

ngOnInit() {

     // this.loading gets set to false after an observable is returned

    /* ... */

    // scroll check
    let e = document.getElementById(`${this.someID}`);

    if (element !== null) {
        this.isScrollable = e.scrollHeight > e.clientHeight;
    }
}

如果我不检查 null，我会得到错误。如果我做检查null，那么即使我有可滚动的内容，当页面加载时，边框也不会出现。

我认为问题可能出在 this.loading 上，所以我在可观察响应中添加了滚动检查，但加载后设置为 false。仍然没有边界。

尝试 2：

<div #textDiv [ngClass]="{'border-class': isScrollable}"> ... </div>

@ViewChild('textDiv') element: ElementRef;

/* ... */

ngAfterViewInit() {
    this.isScrollable = this.element.scrollHeight > this.element.clientHeight;
}

但是当页面加载时，边框仍然没有显示在可滚动内容上。

尝试 3：

唯一奏效的就是这团烂摊子：

setTimeout( () => {
    this.isScrollable = this.element.scrollHeight > this.element.clientHeight;
});

有没有一种方法可以在不调用 setTimeout 的情况下使其工作？

Answer 1

问题出在这里：

<div ngIf="!loading">
    <div id="{{someID}}" [ngClass]="{'border-class': isScrollable}"> ... 
</div>

isScrollable 在更改后不会更新值。

您可以解决这个问题，使用 get 并在 ngAfterViewInit 已经执行时返回值：

export class CustomComponent implements AfterViewInit {
    private afterViewInitExecuted = false;
    @ViewChild('textDiv') element: ElementRef;

    public get isScrollable() {
      if(this.afterViewInitExecuted) {
         return this.element.scrollHeight > this.element.clientHeight;
      }
      return false;
    }
    ngAfterViewInit() {
       this.afterViewInitExecuted = true;
    }
}

然后在你的 html 中：

<div ngIf="!loading">
    <div id="{{someID}}" [ngClass]="{'border-class': isScrollable() }"> ... 
</div>

有了它，它应该可以工作了。