如何修复“错误TypeError：无法读取未定义的属性'style'”

Question

我正在按角度制作图像比较滑块，但出现此错误“ ERROR TypeError：无法读取未定义的属性'style'”

所以我认为这些元素一定不是已经加载到DOM中，所以我将其包装在 ngAfterViewInit()，但仍然无法正常工作，并且出现相同的错误

这是html代码

<section id="comparison-slider" class="comparison-slider">
  <div class="picture picture--before">
    <div class="picture__content-wrap">
      <div class="picture_content">
        <h3>random txt</h3>
      </div>
      <img src="../../assets/imgs/wwu/Untitled-1.gif" alt="1">
    </div>
  </div>

  <div class="picture picture--after">
    <div class="picture__content-wrap">
      <div class="picture_content">
        <h3>random txt</h3>
      </div>
      <img src="../../assets/imgs/wwu/Untitled-1.gif" alt="2">
    </div>
  </div>
  <div class="handle">

  </div>
</section>

这是ts代码

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-wwu',
  templateUrl: './wwu.component.html',
  styleUrls: ['./wwu.component.scss']
})
export class WwuComponent implements OnInit {

  constructor() { }

  ngOnInit() { 
  }

  ngAfterViewInit() {

let comparisonSlider = document.getElementById('comparison-slider');
    let pictureAfter: HTMLElement = document.getElementsByClassName('.picture--after')[0] as HTMLElement;
    let handle: HTMLElement = document.getElementsByClassName('.handle')[0] as HTMLElement;
    let skew = 0;
    let delta = 0;

    if (comparisonSlider.className.indexOf('comparison-slider') != -1) { //if the section has a class ‘comparison-slider’ 
      skew = 2000;
    }

    comparisonSlider.addEventListener('mousemove', function (e) {
      delta = (e.clientX - window.innerWidth / 2) * 0.5; // distance between the mouse and the center of the section
      handle.style.left = e.clientX + delta + 'px'; // change handle position
      pictureAfter.style.width = e.clientX + skew + delta + 'px'; // change width of pictureAfter
    });

  }

}

这是错误日志

core.js:15724 ERROR TypeError: Cannot read property 'style' of undefined
    at HTMLElement.<anonymous> (wwu.component.ts:32)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1744)
    at HTMLElement.globalZoneAwareCallback (zone.js:1770)
defaultErrorLogger  @   core.js:15724
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError    @   core.js:15772
next    @   core.js:17771
schedulerFn @   core.js:13515
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub   @   Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next   @   Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next  @   Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next   @   Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @   Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit   @   core.js:13499
(anonymous) @   core.js:17321
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke    @   zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run   @   zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular    @   core.js:17258
onHandleError   @   core.js:17321
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError   @   zone.js:395
push../node_modules/zone.js/dist/zone.js.Zone.runTask   @   zone.js:198
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask    @   zone.js:498
invokeTask  @   zone.js:1744
globalZoneAwareCallback

Answer 1

您应该在getElementsByClassname中仅指定 classname ，而不能将。指定为前缀

。

 let handle: HTMLElement = document.getElementsByClassName('.handle')[0] as HTMLElement;

应该是

   let handle: HTMLElement = document.getElementsByClassName('handle')[0] as HTMLElement;

还删除。图片中的。-之后