0

我正在使用 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"
      }

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

在此处输入图像描述

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

4

3 回答 3

1

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

  • 与comUser
  • 带可见计数器

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

于 2020-07-07T08:25:53.610 回答
1

为了简化事情，完全摆脱comUser道具。visibleCounter发生的事情是它在尚未定义时被计算一次（我假设，如果您实际跳过的片段中的凭证检查失败） 。而且你也不需要它。只需在模板中

<p class="alert">Reloading in {{ visibleCounter }}</p>
于 2020-07-07T08:28:35.530 回答
1

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

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

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

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

然后在角度模板中，您再次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}`;

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

于 2020-07-07T08:41:15.690 回答