typescript - Angular-setter blir ikke kalt med samme verdi

Jeg har et veldig enkelt skjema (med tre felter) som oppdaterer en konfigurering. Når jeg klikker på oppdater-knappen, vil jeg at en suksessmelding skal vises og forsvinne etter 5 sekunder. Når send-knappen er klikket (konfigurasjonen oppdatert), hvis skjemaet sendes inn igjen før den forrige meldingen har forsvunnet, vil jeg at de forrige 5 sekundene skal ignoreres og at suksessmeldingen skal vises i de neste 5 sekundene.

Jeg prøvde å oppnå det ved å:

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

Og :

_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;
}

Jeg setter en melding når sendeknappen klikkes. Så meldingen vises og forsvinner etter 5 sekunder. Men set-metoden blir ikke kalt når jeg prøver å oppdatere konfigurasjonen igjen fordi meldingen alltid er den samme - "Success". Har du noen idé om hvordan man kan oppnå dette?

Svar #1

Problemet er knyttet til Angulars endringsdeteksjonsmekanisme. Ved andre innsending, hvis det ikke er noen endringer, er skjemaet fortsatt merket som urørt og innsendingen har ingen effekt.

En løsning er å legge til en klikkerlytter som eksplisitt kaller en funksjon for å sette meldingen.

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

Svar #2

Vennligst sjekk denne koden. Jeg er ikke sikker på å sjekke ryddet _timeout med "if".

_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;
  }
}