Angular 屬性在初始化/onInit 函數后變得未定義

Question

我有一個奇怪的問題，我設置的 angular 組件上的屬性在初始化后丟失了它們的值。 該組件只是一個簡單的 html 文件，上面有一個視頻播放器。 （如下所示）

<video width="200" controls="true" poster="" id="video">
    <source type="video/mp4" src="http://www.w3schools.com/html/mov_bbb.mp4">
</video>

然后在組件 typescript 文件中，我嘗試使用預定義的值創建屬性，創建沒有值的屬性，然后在構造函數中分配它，然后也創建沒有值並在 onInit 中分配。 在所有三種情況下，如果我控制台記錄該值，我可以看到它具有正確的值。 但是，在稍后調用的事件中，該值是未定義的。 該屬性也沒有綁定到任何元素或類似的東西。

創建具有價值的屬性

export class VideoPlayerComponent implements OnInit {

  timeStarted = 0;
  timePlayed = 0;
  duration = 0;
  video: HTMLVideoElement;

  constructor() {
    
  }


  ngOnInit(): void {
    //Have values when logged here
    console.log("Time Started: " + this.timeStarted);
    console.log("Time Played: " + this.timePlayed);
    console.log("Duration: " + this.duration);
    this.video = <HTMLVideoElement> document.getElementById("video");

    this.video.addEventListener("pause", this.videoStoppedPlaying);
    

  }
  
  videoStoppedPlaying(event) {
    //is undefined here
    console.log("Time Started: " + this.timeStarted);
    console.log("Time Played: " + this.timePlayed);
    console.log("Duration: " + this.duration);
  }
}

創建屬性然后在構造函數中賦值

export class VideoPlayerComponent implements OnInit {

  timeStarted: number;
  timePlayed: number;
  duration: number;
  video: HTMLVideoElement;

  constructor() {
    this.timeStarted = 0;
    this.timePlayed = 0;
    this.duration = 0
    this.video = <HTMLVideoElement> document.getElementById("video");
  }


  ngOnInit(): void {
    //Have values when logged here
    console.log("Time Started: " + this.timeStarted);
    console.log("Time Played: " + this.timePlayed);
    console.log("Duration: " + this.duration);

    this.video.addEventListener("pause", this.videoStoppedPlaying);
    

  }

  videoStoppedPlaying(event) {
    //is undefined here
    console.log("Time Started: " + this.timeStarted);
    console.log("Time Played: " + this.timePlayed);
    console.log("Duration: " + this.duration);
  }

}

創建屬性，然后在 onInit 中分配

export class VideoPlayerComponent implements OnInit {

  timeStarted: number;
  timePlayed: number;
  duration: number;
  video: HTMLVideoElement;

  constructor() {
    
  }


  ngOnInit(): void {
    this.timeStarted = 0;
    this.timePlayed = 0;
    this.duration = 0
    this.video = <HTMLVideoElement> document.getElementById("video");
    //Have values when logged here
    console.log("Time Started: " + this.timeStarted);
    console.log("Time Played: " + this.timePlayed);
    console.log("Duration: " + this.duration);

    this.video.addEventListener("pause", this.videoStoppedPlaying);
    

  }

  videoStoppedPlaying(event) {
    //is undefined here
    console.log("Time Started: " + this.timeStarted);
    console.log("Time Played: " + this.timePlayed);
    console.log("Duration: " + this.duration);
  }

}

任何人都可以提供有關初始化和加載后可能導致值消失的原因的任何見解嗎？

Answer 1

這是因為關鍵字this並不像您想象的那樣指代您的組件VideoPlayerComponent ，在您的情況下，它將指代this.video 。
由於以下代碼行：

this.video.addEventListener("pause", this.videoStoppedPlaying);

function videoStoppedPlaying在 object video中被調用，並且你可能不知道關鍵字this指的是 object，他實際上是在video中調用的，因此重新提供。
在video object 中沒有timeStarted和timePlayed ，這就是它們未定義的原因，但是有一個名為duration的屬性，這就是為什么你會得到duration值的原因。
如果您想了解有關video object 中存在的屬性的更多信息，請查看此文檔和 go HTML 音頻/視頻屬性。
我還為您創建了一個帶有更多屬性的現場演示。

Answer 2

你不應該使用addEventListener("pause", this.videoStoppedPlaying); 但請改用 HTML 模板中的(pause)事件。

像這樣：

<video width="200" controls="true" poster="" id="video" (pause)="videoStoppedPlaying($event)">
    <source type="video/mp4" src="http://www.w3schools.com/html/mov_bbb.mp4">
</video>

你的錯誤是你沒有綁定this 。 您可能可以這樣做： this.video.addEventListener("pause", this.videoStoppedPlaying.bind(this));

另外，請考慮使用@ViewChild()而不是document.getElementById("video") 。

Answer 3

您可以使用視頻“事件”來獲取您需要的所有數據並將其分配給您創建的屬性

你的 VideostoppedPlaying Function 看起來像這樣

    videoStoppedPlaying(event) {
    this.duration = event.target.duration
    this.timePlayed = event.target.currentTime
    console.log("Time Played: " + this.timePlayed);
    console.log("Duration: " + this.duration);
  }
}

當您在 addEventListener 調用 function 時，不要忘記添加“事件”

    this.video.addEventListener("pause",e=> this.videoStoppedPlaying(e));