Home / Questions / 349896
Accepted
beaag58
Asked: 2020-04-27 23:25:51 +0800 CST 2020-04-27 23:25:51 +0800 CST

Object is possibly 'null' with document.getElementById('product-detail-images').getBoundingClientRect()

  • 772

Hello, I am working in universal Angular and I have the following function

private validateBox() {
    const divHeight: any = document.getElementById('product-detail-images').getBoundingClientRect();
    if (divHeight) {
        if (divHeight.top > -2491) {
            this.isAbsolute = false;
            this.cd.markForCheck();
        } else {
            this.isAbsolute = true;
            this.cd.markForCheck();
        }
    }
}

The problem is that document.getElementById('product-detail-images').getBoundingClientRect()it gives me an error in the console. error TS2531: Object is possibly 'null'.

angular

2 Answers

  1. Best Answer

    It's a compiler error, because you're not checking whether the element exists or not, but you do have a check on whether the height is 0 or not. You should check it like this:

    private validateBox() {
    const divHeight: any = document.getElementById('product-detail-images')!.getBoundingClientRect();
        if (divHeight.top > -2491) {
            this.isAbsolute = false;
            this.cd.markForCheck();
        } else {
            this.isAbsolute = true;
            this.cd.markForCheck();
        }
    }
}

    The exclamation mark is the "check not null" operator, if the call to document.getElementByIdis null, it will not cause an error but will make div equalnull

    • 1

  2. This is because you probably have the flag enabled in your tsconfig file strict null checks. This is a feature to avoid runtime errors.

    private validateBox() {
    const div: Element | null = document.getElementById('product-detail-images');
    if (div) {
        const divHeight: any = document.getElementById('product-detail-images').getBoundingClientRect();
        if (divHeight.top > -2491) {
            this.isAbsolute = false;
            this.cd.markForCheck();
        } else {
            this.isAbsolute = true;
            this.cd.markForCheck();
        }
    }
}
    • 0