Meilleure façon de mettre en œuvre la sauvegarde automatique de la valeur d'entrée dans Angular 2

Question

Dans mon application angulaire 2, j'ai besoin de mettre à jour la base de données en fonction de tout changement dans une valeur d'étiquette d'entrée sur l'écran UI.

Je dois mettre à jour cette modification de manière à: 1. Pour l'utilisateur final de l'application, il semble que la valeur d'entrée ait été enregistrée automatiquement. 2. La page de mon application comporte une fonction d'actualisation qui actualise automatiquement la page toutes les 30 secondes en utilisant les hits de l'API. Quelle sera l'approche appropriée pour implémenter la fonctionnalité de sauvegarde automatique afin qu'elle ne soit pas en conflit avec la fonctionnalité d'actualisation de l'application qui est l'utilisateur effectue les changements à la 29e seconde, et si la page est actualisée à la 30e seconde, nous besoin de préserver les données que l'utilisateur entrait? D'après ce que je comprends, faire un appel à la base de données à chaque frappe dans la balise d'entrée est un processus très coûteux.

Veuillez suggérer une approche utile et efficace.

Answer 1

Vous pouvez publier les modifications apportées à un BehaviourSubject et retarder chaque émission afin que votre client ne fasse pas trop de demandes.

form.html

<input (change)="captureChange($event.target.value)"/> 

Logic.ts

public $changeValues : Subject = new BehaviourSubject(); 

captureChange(val){ 
    this.changeValues.next(val) 
} 

ngOnInit(){ 
    $changeValues 
    .debounceTime(/** some time you wish to delay by*/) 
    .subscribe(val => autosave(val)) 
} 
autosave(){ 
    /** 

    Make HTTP Request 


    **/ 
}