Question

我有两个全局属性

  htmlContentElement 
  htmlContentContainer

我在

中设置了它

ngAfterViewInit() {
    this.htmlContentElement = document.getElementById("messageContent");
    this.htmlContentContainer = document.getElementById("messageContainer");
}

我在这个方法中使用这个属性

setOcrMessage() {
    let originalContent = this.htmlContentElement.innerHTML;
    console.log(this.htmlContentElement);
    this.htmlContentElement.innerHTML = this.ocrInfo.message;
    if(this.ocrInfo.status) {
      this.htmlContentElement.style.color = "#168F48";
      this.htmlContentContainer.style.background = "rgb(236, 253, 240)";
    } else {
      this.htmlContentElement.style.color = "#e50000";
      this.htmlContentContainer.style.background = "rgb(251, 233, 235)";
    }

    setTimeout(function() {
      console.log(this.htmlContentElement);
      this.htmlContentElement.innerHTML = originalContent;
      this.this.htmlContentElement.style.color = "#979797";
      this.htmlContentContainer.style.background = "white";
      this.htmlContentContainer.style.opacity = "1";
    }, 3000);
  }
}

第一个console.log（this.htmlContentElement）返回元素但是setTimeout（）中的第二个返回undefined

我在

中执行setOcrMessage（）

constructor( private imageService: ImageService, private documentService: DocumentService,
  private ocrService: OcrService) {
    this.ocrMessageSubscription = this.ocrService.messageIfOcrCorrectly.subscribe(
      (res: ocrMessage) => {
        this.ocrInfo = res;
        this.setOcrMessage();
      }
    )
  }

为什么htmlContentElement变得未定义？当我使用 htmlContentElement和 htmlContentContainer setOcrMessage（）中的本地属性一切正常。

Answer 1

因为您使用函数而不是

而丢失了闭包

setTimeout(function() {
      console.log(this.htmlContentElement);
      this.htmlContentElement.innerHTML = originalContent;
      this.this.htmlContentElement.style.color = "#979797";
      this.htmlContentContainer.style.background = "white";
      this.htmlContentContainer.style.opacity = "1";
    }, 3000);

尝试使用箭头功能

setTimeout(() => {
      console.log(this.htmlContentElement);
      this.htmlContentElement.innerHTML = originalContent;
      this.this.htmlContentElement.style.color = "#979797";
      this.htmlContentContainer.style.background = "white";
      this.htmlContentContainer.style.opacity = "1";
    }, 3000);

Answer 2

this内的{p> setTimeout不是指父块上的this。你可以做这样的事情。只需将this转换为单独的变量即可。

    setOcrMessage() {
        let originalContent = this.htmlContentElement.innerHTML;
        console.log(this.htmlContentElement);
        this.htmlContentElement.innerHTML = this.ocrInfo.message;
        if(this.ocrInfo.status) {
          this.htmlContentElement.style.color = "#168F48";
          this.htmlContentContainer.style.background = "rgb(236, 253, 240)";
        } else {
          this.htmlContentElement.style.color = "#e50000";
          this.htmlContentContainer.style.background = "rgb(251, 233, 235)";
        }

        var self = this;

        setTimeout(function() {
          console.log(self.htmlContentElement);
          self.htmlContentElement.innerHTML = originalContent;
          self.htmlContentElement.style.color = "#979797";
          self.htmlContentContainer.style.background = "white";
          self.htmlContentContainer.style.opacity = "1";
        }, 3000);
      }
    }

Answer 3

上面的所有两个答案都是正确的，但是这个概念在箭头函数中被称为“lexical this”

Dom Element undefined

3 个答案: