Question

我有一个非常简单的表单（包含三个字段），用于更新配置。当我单击更新按钮时，我希望显示成功消息，并在5秒钟后消失。单击提交按钮（配置更新）后，如果在上一条消息消失之前再次提交表单，我希望忽略前5秒钟，并且成功消息在接下来的5秒钟内保持不变。

我试图通过以下方式实现这一目标：

<div *ngIf="message">
  {{ message }}
</div>

并且：

_message: string;
_timeout: number;

get message() {
  return this._message;
}

@Input()
set message(value: string) {
  if (value) {
    if (this._timeout) {
      clearTimeout(this._timeout);
    }
    this._timeout = setTimeout(function() {
      this.message = null;
    }.bind(this), 5000);
  }
  this._message = value;
}

点击“提交”按钮后，我正在设置一条消息。因此，该消息确实显示并在5秒钟后消失。但是，当我尝试再次更新配置时，不会调用set方法，因为消息始终是相同的-“成功”。任何想法如何实现这一目标？

Answer 1

请检查此代码。我不确定要使用“ if”检查已清除的_timeout。

_message : string; _timeout: number;   

get message() {
  return this._message;
}

@Input()
set message(value: string) {
  if (value && this._timeout == -1) {        
    this._timeout = setTimeout(function () {
      clearTimeout(this._timeout);
      this.message = null;
    }.bind(this), 5000);

    this._message = value;
  }
}

Answer 2

该问题与“角度变化检测”机制有关。在第二次提交时，如果没有更改，则该表单仍会标记为“原始”，并且该提交无效。

一种解决方案是添加一个Click侦听器，该侦听器明确调用一个函数来设置消息。

<input type="submit" (click)="displayMessage()" />

角设定器未调用相同的值

2 个答案: