Question

在这个基本的app.component.ts示例代码段中（仅出于学习目的而创建），我观察到如果我在构造函数中使用setInterval块，则从该块中对一个模板变量进行字符串插值不会工作。

我知道这不是一个有意义的例子，但确实显示了这个问题：
这里应该使用什么技术，以便我们可以更新模板中的{{timeDisplay}}区域？

这看起来像是一个范围问题。这可以通过全局变量来解决吗？或者，解决此问题的更好方法是什么？

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

export class Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  timeDisplay: string;

  constructor () {
    this.timeDisplay = 'time will be displayed right here.';

    // set timer
    setInterval(
        function(){
            this.timeDisplay = new Date(); // this does not create an error but does not do anything neither. it is most likely timeDisplay variable is not in the constructor's scope
        },
        1000
    );

  }

Answer 1

问题是你在this失去了// set timer setInterval( function(){ this.timeDisplay = new Date(); // this does not create an error but does not do anything neither. it is most likely timeDisplay variable is not in the constructor's scope ^^^ - points to global object, not `AppComponent` }, 1000 );的上下文，因为函数表达式不会保留上下文：

// set timer
setInterval(
    () => {
        this.timeDisplay = new Date();
    },
    1000
);

将其更改为保留上下文的箭头函数：

puts x.getName()

有关详细信息，请参阅this answer。

字符串插值不通过setInterval工作

1 个答案: