变量在 Angular 中具有值时被视为未定义

Question

我正在 Angular 中使用双向绑定对点击进行简单的倒计时。我有一个数字元素，它在带有 setInterval 的函数中获取其值，该函数在单击按钮时执行。但是当我启动它时，该值被视为未定义，一秒钟后显示该值，但未定义仍然存在。

HTML分量：

<p class="alert">{{comUser}} {{visibleCounter}}</p>
<button class="buttonMain" (click)="log(email, password)" (click)="countTo0()">Login</button>

COMPONENT.ts

export class LoginComponent implements OnInit {
public comUser = '' }

  public visibleCounter;
  public counter: number = 4;
  public alert: string = "SIGN IN";

  countTo0() {
  const frequency = setInterval(() => {
    this.visibleCounter = this.counter;
    console.log(this.counter);
    let oneDown = this.counter--
    console.log("visible counter: ", this.visibleCounter);
    if (this.counter <= 0 ) {
      clearInterval(frequency);
      this.document.location.reload()
    }
  }, 1000);
  }

然后在 else 语句中调用该函数，因为这是登录组件的一部分。如果您传递了错误的凭据，您会收到一条消息，指出它将在 [秒数] 后重新加载。

else{
        this.comUser = `Reloading in ${this.visibleCounter}`;
        this.alert = "WRONG LOGIN OR PASSWORD"
      }

结果如下所示（计数器有效，但“未定义”仍然存在）

感谢您提供有关此奇怪行为的可能原因的任何提示。

Answer 1

visibleCounter 在您的模板中显示了两次：

与 comUser
与 visibleCounter

你应该从 comUser 中删除它：因为 visibleCounter 仅在 1 秒后使用 setInterval 初始化，当定义 comUser 时它仍然未定义.

Answer 2

为了简化事情，干脆去掉 comUser 道具。发生的事情是在尚未定义 visibleCounter 时计算一次（我假设，如果您实际跳过的片段中的凭据检查失败）。反正你也不需要它。只需在模板中

<p class="alert">Reloading in {{ visibleCounter }}</p>

Answer 3

我假设 this.comUser = `Reloading in ${this.visibleCounter}`; 是运行ning，而 visibleCounter 仍未定义，并且在显示模板时它不会再次运行。

所以基本上会发生这种情况：

this.comUser = `Reloading in ${undefined}`

this.comUser 将具有此值："Reloading in undefined"

然后在 angular 模板中再次添加 visibleCounter，如下所示：

<p class="alert">{{comUser}} {{visibleCounter}}</p>

渲染结果将是（如果 visibleCounter 为 4）：

<p class="alert">Reloading in undefined 4</p>

我认为解决方案是从中删除 ${this.visibleCounter} 这条线

this.comUser = `Reloading in ${this.visibleCounter}`;

实际上，如果您只想在模板中显示它，则不必在 Class 中定义 comUser。直接将值写入模板即可。

变量在 Angular 中具有值时被视为未定义

Variable seen as undefined when it has value in Angular

javascript

setinterval

angular

two-way-binding