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

Question

Я разрабатываю страницу, чтобы показать несколько видео, и они могут понравиться пользователям.Видео и лайки сохраняются в базе данных, и я использовал два угловых сервиса для установки и получения данных.Моя проблема заключается в установке и отмене лайков на видео.после каждого запроса на установку или отзыв, как на видео, данные страницы обновлялись, и загрузка видео расстраивала пользователя.сервисы работают нормально, и наборы данных в базу данных корректно.

Мне просто нужно обновить цвет кнопки и количество лайков на странице.В чем заключается решение игнорировать обновление видео-ссылок , которые исправлены и никогда не менялись?

Ниже я поместил часть своих кодов:

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

Вы можете сделать это в setLike и revokeLike функциях, отправив video object на function и make isLiked, чтобы изменить accordingly

Это сделает *ngIfусловие работает для вас.

HTML:

<mat-card-actions class="text-center">
    <button *ngIf="video.isLiked == true" mat-icon-button color="warn">
        <mat-icon (click)="revokeLike(1, video)">favorite</mat-icon>
    </button>

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

Компонент:

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

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

Answer 2

На основании информации я бы так и сделал.Идея заключается в том, что нет необходимости запрашивать серверную часть для списка видео, так как вы знаете, что / как изменилось, и вы применяете изменения, только если у вас есть хороший ответ.

Шаблон:

<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>

Контроллер:

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
        );
    }

}