如何有效地显示用户更改/更新

Question

我有一个类似于线程/帖子的时刻组件。用户可以喜欢或不喜欢这一刻。一旦他们喜欢我调用 momentService 再次检索整个列表的那一刻，它就会刷新并增加那一刻的点赞数。

但是，由于我只喜欢一个帖子，因此无法有效地更新所有其他时刻。什么是展示此更新/更改而无需再次获得所有时刻的最佳方式。

当我调用更新时，我检索更新的时刻对象。那么有没有办法在时刻对象中更新这个特定时刻。

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（后端 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

除了将 id 传递给 like/dislike 方法，您可以传递整个对象，然后从那里将 id 传递给 update 方法，并在成功时改变引用。