javascript - Angular 5 - 如何忽略更新 Observable 的一个属性

Question

我正在开发一个页面来显示一些视频，用户可以喜欢它们。视频和点赞保存在数据库中，我使用两个 Angular 服务来设置和获取数据。我的问题是关于设置和撤销视频的点赞。每次请求设置或撤销(如视频)后，页面数据都会被刷新，加载视频会让用户感到不安。服务工作正常，数据集正确到数据库。

我只需要更新页面中的点赞按钮颜色和点赞计数。对于忽略更新的视频链接已修复且从未更改的解决方案是什么？

下面是我的部分代码:

index.component.html:

<mat-card class="example-card" *ngFor="let video of videos">
    <mat-card-header>
        <mat-card-title>{{ video.title }}</mat-card-title>
        <mat-card-subtitle>
            {{ video.description }}
        </mat-card-subtitle>
    </mat-card-header>
    <div class="video-container">
        <iframe class="video-frame" [src]="video.mediaSource | safe" allowFullScreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" ></iframe>
    </div>
    <mat-card-actions class="text-center">
        <button *ngIf="video.isLiked == true" mat-icon-button color="warn">
            <mat-icon (click)="revokeLike(1, video.id)">favorite</mat-icon>
        </button>

        <button *ngIf="video.isLiked == false" mat-icon-button class="grey_like">
            <mat-icon (click)="setLike(1, video.id)">favorite</mat-icon>
        </button>
        <span>{{ competition.likesCount }} Likes</span>
    </mat-card-actions>
</mat-card>

index.component.ts:

export class ShowComponent implements OnInit {

    competitions:any;

    constructor(private service:VideoService, private http: HttpClient, private likeservice:LikeService) { }

    ngOnInit() {
        this.getVideos();
    }

    getVideos() {
        this.service.getVideos(1).subscribe(res => {
            this.videos = res;
        });
    }

    setLike(iid, video_id) {
        this.likeservice.setLike(iid, video_id).subscribe(
            () => this.getCompetitions()
        );
    }

    revokeLike(iid, video_id) {
        this.likeservice.revokeLike(iid, video_id).subscribe(
            () => this.getCompetitions()
        );
    }

}

videos.service.ts:

getVideos(id): Observable<any> {
    const uri = 'http://localhost:4000/videos/iid/' + id;
    return this
        .http
        .get(uri)
        .map(res => {
            return res;
        });
}

like.service.ts:

setLike(iid, competition_id) {
    const uri = 'http://localhost:4000/likes/set';
    const obj = {
        iid: iid,
        competition_id: competition_id
    };

    return this
        .http
        .post(uri, obj)
        .map(res =>
            console.log('Done'));
}

revokeLike(iid, competition_id) {
    const uri = 'http://localhost:4000/likes/revoke';
    const obj = {
        iid: iid,
        competition_id: competition_id
    };

    return this
        .http
        .post(uri, obj)
        .map(res =>
            console.log('Done'));
}

Answer 1

根据信息，我会这样做。我们的想法是，无需重新查询后端的视频列表，因为您知道更改了什么/如何更改，并且只有在获得良好响应时才应用更改。

模板:

<mat-card class="example-card" *ngFor="let video of videos">
    ...
    <button *ngIf="video.isLiked == true" mat-icon-button color="warn">
        <mat-icon (click)="revokeLike(video)">favorite</mat-icon>
    </button>

    <button *ngIf="video.isLiked == false" mat-icon-button class="grey_like">
        <mat-icon (click)="setLike(video)">favorite</mat-icon>
    </button>
    ...
</mat-card>

Controller :

export class ShowComponent implements OnInit {

    competitions:any;

    constructor(private service:VideoService, private http: HttpClient, private likeservice:LikeService) { }

    ngOnInit() {
        this.getVideos();
    }

    getVideos() {
        this.service.getVideos(1).subscribe(res => {
            this.videos = res;
        });
    }

    setLike(video) {
        this.likeservice.setLike(1, video.id).subscribe(
            () => video.isLiked = true
        );
    }

    revokeLike(video) {
        this.likeservice.revokeLike(1, video.id).subscribe(
            () => video.isLiked = false
        );
    }

}