Comment afficher efficacement un changement d'utilisateur/mise à jour

Question

J'ai un composant moments qui est similaire à un fil/poste. Les utilisateurs peuvent aimer ou ne pas aimer ce moment. Une fois qu'ils aiment le moment j'appelle le moment Service pour récupérer la liste entière à nouveau afin qu'il rafraîchisse et augmente le nombre de points du moment.

Cependant, comme je n'aime qu'un article, il n'est pas efficace de mettre à jour tous les autres moments. Quel est le meilleur moyen de montrer cette mise à jour/changement sans avoir à obtenir tous les moments à nouveau. Lorsque j'appelle la mise à jour, je récupère l'objet de moment mis à jour.

Il existe donc un moyen de mettre à jour ce moment spécifique dans l'objet moments.

moments.component.html

<mat-card class="" *ngFor="let moment of moments"> 
      <mat-card-header class="sub-header" fxLayout="row" fxLayoutAlign="space-between center"> 

       <mat-card-subtitle> 
        {{moment.created_at}} 
       </mat-card-subtitle> 
       <mat-card-title> 
        <img src="http://via.placeholder.com/50x50" alt="" class="img-circle"> 

       </mat-card-title> 
       <div> 
        <button mat-icon-button color="warn" matTooltip="Delete" (click)="delete(moment._id)"> 
         <mat-icon>delete</mat-icon> 
        </button> 

        <button mat-icon-button> 
         <mat-icon>more_vert</mat-icon> 
        </button> 
       </div> 
      </mat-card-header> 
      <mat-card-content> 
       <p> 
        {{moment.body}} 
       </p> 
      </mat-card-content> 
      <mat-card-actions fxLayout="row" fxLayoutAlign="space-between center"> 
       <div> 
        <button mat-icon-button matTooltip="Like" (click)="like(moment._id)"> 
         <mat-icon>thumb_up</mat-icon> {{moment.likes.length}} 
        </button> 
        <button mat-icon-button matTooltip="Dislike" (click)="dislike(moment._id)"> 
         <mat-icon>thumb_down</mat-icon> {{moment.dislikes.length}} 
        </button> 
       </div> 
       <button mat-icon-button matTooltip="Comments"> 
         <mat-icon>comment</mat-icon> {{moment.comments.length}} 
       </button> 
      </mat-card-actions> 
     </mat-card> 

moment.component.ts

import { Component, OnInit } from '@angular/core'; 
import { AuthService } from '../../../services/auth.service'; 
import { MomentService } from '../../../services/moment.service'; 
import { Router, ActivatedRoute, ParamMap } from '@angular/router'; 
import { UserService } from '../../../services/user.service'; 

@Component({ 
    selector: 'app-moments', 
    templateUrl: './moments.component.html', 
    styleUrls: ['./moments.component.scss'] 
}) 
export class MomentsComponent implements OnInit { 

    user: any; 
    moments: any; 

    constructor(private authService: AuthService, 
    private userService: UserService, 
    private momentService: MomentService, 
    private route: ActivatedRoute, 
    private router: Router) { } 

    ngOnInit() { 

    this.route.parent.paramMap.switchMap((params: ParamMap) => { 
     let user_id = params.get('id'); 
     return this.userService.get(user_id); 
    }).subscribe((res) => { 
     this.user = res; 


     console.log(this.user._id); 

     this.getMoments(); 

    }); 
    } 

    getMoments() { 
    this.momentService.all(this.user._id).subscribe((res) => { 
     this.moments = res.data; 
    }, (err) => { 
     console.log(err); 
    }); 
    } 


    like(moment) { 

    let like = { 'like': this.user._id }; 

    this.momentService.update(moment, like).subscribe((res) => { 
     this.getMoments(); 
     console.log(res); 
    }, (err) => { 
     console.log(err); 
    }); 
    } 
    dislike(moment) { 

    let dislike = { 'dislike': this.user._id }; 

    this.momentService.update(moment, dislike).subscribe((res) => { 
     this.getMoments(); 
     console.log(res); 
    }, (err) => { 
     console.log(err); 
    }); 
    } 

    delete(moment) { 

    let id = moment; 

    this.momentService.delete(id).subscribe((res) => { 

     this.getMoments(); 
     console.log(res); 

    }, (err) => { 
     console.log(err); 
    }) 

    } 

} 

moments.service.ts

import { HttpParams } from '@angular/common/http'; 
import { Injectable } from '@angular/core'; 
import { ApiService } from './api.service'; 

@Injectable() 
export class MomentService { 

    path = 'moment/'; 

    constructor(private apiService: ApiService) { } 

    create(user_id, moment) { 

     let endpoint = this.path; 

     return this.apiService.post(endpoint, moment); 

    } 

    delete(moment_id) { 

     let endpoint = this.path + moment_id; 

     return this.apiService.delete(endpoint); 

    } 

    all(user_id) { 

     let endpoint = this.path; 

     let params = new HttpParams().set('author', user_id); 

     return this.apiService.get(endpoint, params); 

    } 

    get(moment_id) { 

     let endpoint = this.path + moment_id; 

     return this.apiService.get('endpoint'); 

    } 

    update(moment_id, data) { 

     let endpoint = this.path + moment_id; 

     return this.apiService.put(endpoint, data); 

    } 

    search(filters) { 

     let endpoint = this.path; 

     let params = new HttpParams().set('filters', filters); 

     return this.apiService.get(endpoint, params); 

    } 

} 

moment.controller.js (back-end api)

update(req, res) { 

    let id = req.params.id; 


    Moment.findOne({ '_id': id }, (err, moment) => { 

     if (req.body.body) { 
      moment.body = req.body.body; 
     } 


     // LIKE&DISLIKE Toggle 
     if (req.body.like) { 

      if (moment.dislikes.indexOf(req.body.like) > -1) { 
       moment.dislikes.remove(req.body.like); 
      } 

      if (moment.likes.indexOf(req.body.like) > -1) { 
       moment.likes.remove(req.body.like); 
      } else { 
       moment.likes.push(req.body.like); 
      } 
     } 

     if (req.body.dislike) { 

      if (moment.likes.indexOf(req.body.dislike) > -1) { 
       moment.likes.remove(req.body.dislike); 
      } 

      if (moment.dislikes.indexOf(req.body.dislike) > -1) { 
       moment.dislikes.remove(req.body.dislike); 
      } else { 
       moment.dislikes.push(req.body.dislike); 
      } 
     } 

     moment.save((err, moment) => { 

      if (err) { 

       return res.status(404).json({ 

        success: false, 
        status: 404, 
        data: {}, 
        mesage: "Failed to update moment" 

       }); 
      } 

      return res.status(201).json({ 

       succss: true, 
       status: 201, 
       data: moment, 
       message: "Succesfully updated moment", 

      }); 

     }); 

    }) 

} 

Answer 1

Au lieu de passer l'identifiant aux méthodes comme/aversion, vous pouvez passer tout l'objet et de passer là-bas l'identifiant à la méthode de mise à jour, et succès, muter la référence.