Angular 5 - Как игнорировать обновление одного свойства Observable

Я разрабатываю страницу, чтобы показать несколько видеороликов, и они могут понравиться пользователю. Видео и лайки сохраняются в базе данных, и я использовал два сервиса 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.info('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.info('Done'));
}