Angular Saving an Edited Content

Rocket Monkey

I'm writing a code where a user can change a paragraph on the screen and save it. Currently, the user can change the paragraph and the save() operation works. But when saved, the changed paragraph doesn't go through the network. The paragraph doesn't change it saves the unedited version as if I haven't written anything. What should I change to achieve that?

HTML:

  <div class="content fuse-white ml-24 mr-8 h-100-p" fusePerfectScrollbar>
            <div class="label-list">
                <p>
                    A Paragraph: 
    
                    <span contenteditable="true">
                        {{_stickerData?.StickerData}}
                    </span>
                </p>
              
            </div>
        </div>

TS:

save(){
    this.confirmDialogRef = this._dialog.open(FuseConfirmDialogComponent, {
        disableClose: false,
    });
    
    this.confirmDialogRef.componentInstance.confirmMessage =
    "The paragraph will be changed";

this.confirmDialogRef.afterClosed().subscribe((result) => {
    if (result) {
        this._productionService
            .saveStickerData(this._stickerData)
            .subscribe((response: IStickerData) => {
                this._stickerData = response;
                this._messages.Show(            
                    "SUCCESS",
                    3
                );
            });
    }
});
}

Service TS:

saveStickerData(data: IStickerData): Observable<IStickerData> {
        return this._http.post("Production/SaveStickerData", data);
    }
Vitalii Y

[EDITED] When you interpolate your variable in the template and use contenteditable - it doesn't update your variable. You should update it manually.

<span contenteditable [textContent]="_stickerData?.StickerData" (input)="onStickerDataChange($event.target.innerHTML)">
</span>

and in TS should be something like this:

onStickerDataUpdate(data) {
    this._stickerData.StickerData = data;
}

Useful Links: 1, 2 [OLD RECOMMENDATIONS]

  1. Are your sure that response has edited paragraph? If yes, Probably there is a problem with Change Detection. Import in component constructor ChangeDetectorRef and trigger markForCheck() method when getting data.
  2. Nested subscriptions is a bad practice, try to refactor with switchMap()

This is a pseudocode to show the idea:

   class MyComponent {
      constructor(private cd: ChangeDetectorRef) {}
        
       save(){
         this.confirmDialogRef = 
         this._dialog.open(FuseConfirmDialogComponent, {
            disableClose: false,});
         this.confirmDialogRef.componentInstance.confirmMessage =
    "The paragraph will be changed";

         this.confirmDialogRef.afterClosed().pipe(switchMap(result) => {
           if (result) {
             return this._productionService.saveStickerData(this._stickerData);
           } else {
             return EMPTY;
           }
        }).subscribe((response) => {
          this._stickerData = response;
          this._messages.Show(            
             "SUCCESS",
             3
          );
          this.cd.markForCheck();
        });
      }
   }

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related