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

【问题标题】：Variable seen as undefined when it has value in Angular变量在 Angular 中具有值时被视为未定义
【发布时间】：2020-07-07 08:14:01
【问题描述】：

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

HTML 组件：

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

组件.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"
      }

结果看起来像这样（计数器有效，但“未定义”仍然存在）

感谢您提供有关导致这种奇怪行为的原因的任何提示。

【问题讨论】：

请堆栈闪电战。
嗨 Vikas，它已经解决了 :)

标签： javascript angular setinterval two-way-binding

【解决方案1】：

为了简化事情，只需完全去掉 comUser 属性。当visibleCounter 尚未定义时，它会被计算一次（我假设，如果您实际跳过的片段中的凭证检查失败）。而且你也不需要它。就在模板里

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

【讨论】：

【解决方案2】：

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

与 comUser
与 visibleCounter

您应该从 comUser 中删除它：因为 visibleCounter 仅在 1 秒后使用 setInterval 进行初始化，因此在定义 comUser 时它仍然未定义。

【讨论】：

【解决方案3】：

我假设 visibleCounter 仍然未定义时 this.comUser = `Reloading in ${this.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.comUser = `Reloading in ${this.visibleCounter}`;

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

【讨论】：