Angular 9 显示数据变化 [立即] 无需重新加载

Question

我想在单击“赞”按钮时增加我的“赞”数组长度，并减少数据库中的“赞”长度。这是我的简要代码 like.component.ts

  @Input('isLiked') isLiked: boolean;
  likes: Like[] = [];
  localUser;

  constructor(
    private postService: PostService,
    private postActivity: PostActivityService
  ) {}

  ngOnInit(): void {
    this.localUser = this.postService.getLocalUSer();
    
  }


  like(id) {
    this.postActivity.likePost(id).subscribe((data) => {
      this.likes = data.likes;
      this.isLiked = this.likes.includes(this.localUser._id)
      console.log('liked data', this.likes,this.isLiked);
    });
  }

  disLike(id) {
    this.postActivity.disLike(id).subscribe((data) => {
      this.likes = data.likes;
      this.isLiked = this.likes.includes(this.localUser._id)
      console.log('liked data', this.likes,this.isLiked);
    });
  }

like.component.html

<button  (click)="isLiked ? disLike(p._id) : like(p._id)" mat-button>
  <mat-icon aria-hidden="false"  [color]="isLiked ? 'warn':'primary'" >{{ isLiked ? 'favorite' : 'favorite_border'}}</mat-icon>
  {{p.likes.length}}

  <ng-container *ngIf="p.likes.length===0 || p.likes.length===1; else elseTemplate">
    like
  </ng-container>
  <ng-template #elseTemplate>
    likes
  </ng-template>
</button>

card.component.html

<app-like [p]="p" [isLiked]="p.likes.includes(signUser._id)"></app-like>

post-activity-服务

 likePost(id) {
    return this.http.put<Mypost>(this.url + '/like', JSON.stringify({ postId: id }), {
      headers: this.headers,
    });
  }


  disLike(id) {
    return this.http.put<Mypost>(this.url + '/unlike', JSON.stringify({ postId: id }), {
      headers: this.headers,
    });
  }

赞长度更新

https://i.stack.imgur.com/n2DnQ.gif

Answer 1

试试这个，如果你想在更新数组的同时更新视图。

like(id) {
        this.postActivity.likePost(id).subscribe((data) => {
            this.likes = [...this.likes, data.likes];
            this.isLiked = this.likes.includes(this.localUser._id);
            console.log('liked data', this.likes,this.isLiked);
        });
    }
    
    disLike(id) {
        this.postActivity.disLike(id).subscribe((data) => {
            this.likes = [...this.likes, data.likes];
            this.isLiked = this.likes.includes(this.localUser._id);
            console.log('liked data', this.likes,this.isLiked);
        });
    }

或者，您在这里显示了错误的值，只需显示当前上下文中的值。即 {{likes.length}} 而不是 {{p.likes.length}}

<button  (click)="isLiked ? disLike(p._id) : like(p._id)" mat-button>
  <mat-icon aria-hidden="false"  [color]="isLiked ? 'warn':'primary'" >{{ isLiked ? 'favorite' : 'favorite_border'}}</mat-icon>
  {{likes.length}}

  <ng-container *ngIf="p.likes.length===0 || p.likes.length===1; else elseTemplate">
    like
  </ng-container>
  <ng-template #elseTemplate>
    likes
  </ng-template>
</button>

Angular 9 显示数据变化 [立即] 无需重新加载

Angular 9 show data change [instantly] without reload

httpservice

angular

angular9