javascript - 基于数组值切换 Angular 组件 CSS 类

Question

我是 Angular 的新手，正在使用 Angular 8 开发我的第一个应用程序，我想根据对象数组值切换组件 css 类。

该对象是一个帖子(test-data/posts.ts)，带有一个点赞数组

export const posts = [{
    id: 1,
    author: {},
    type: 'image',
    media: '',
    repost: 0,
    comments: [],
    likes: [ 1, 2, 3, 4]
}];

所以我的组件 typescript 是这样的，在帖子上添加和删除喜欢，这是有效的

import { Component } from '@angular/core';

import { user } from '../test-data/user';
import { posts } from '../test-data/posts';

@Component({
    selector: 'app-feed',
    templateUrl: './feed.component.html',
    styleUrls: ['./feed.component.css'],
})
export class FeedComponent {
    posts = posts;
    user = user;

    liked = false;

    likePost(post) {
        // If post is liked, remove like
        if (this.isLiked(post)) {
            for (let i = 0; i < post.likes.length; i++) {
                if (post.likes[i] === user.id) { post.likes.splice(i, 1); }
            }
        // If not liked add a new like
        } else {
            post.likes.push(user.id);
        }
        // DEBUG: Log post data
        console.log(post);
    }

    isLiked(post) {
        return post.likes.includes(user.id);
    }
}

我可以检索对象，使用组件添加/删除喜欢，但我如何检查数组以确定帖子应该显示为喜欢还是不喜欢？

我当前的 html 模板是这样的，如果用户 ID (user.id) 出现在像数组 (post.likes) 这样的帖子中，我希望有一个额外的类“feed-icon-red”

<div *ngIf="posts.length">
    <div *ngFor="let post of posts">
        <mat-list>
            <!-- Post Media -->
            <img class="feed-image" [src]="post.media" (dblclick)="likePost(post)"/>

            <!-- Interaction Button Row -->
            <mat-list-item>
                <span>
                    <mat-icon mat-list-icon class="ti-heart" [class.feed-icon-red]="" (dblclick)="likePost(post)"></mat-icon>
                </span>
            </mat-list-item>
        </mat-list>
    </div>
</div>

编辑:我想检查数组中的特定值以设置类。 例如如果 (post.likes.includes(1)) 将图标类设置为“feed-icon-red”

Answer 1

你可以使用 ngClass:

[ngClass]="isLiked(post) ? 'feed-icon-red' : ''"

或者甚至这也有效:

[class.feed-icon-red]="isLiked(post)"

HTML代码:

<div *ngIf="posts.length">
    <div *ngFor="let post of posts">
        <mat-list>
            <!-- Post Media -->
            <img  width=300 class="feed-image" [src]="post.media" (dblclick)="likePost(post)"/>
            <!-- Interaction Button Row -->
            <mat-list-item>
              {{isLiked(post)}}
                <span [ngClass]="isLiked(post)? 'feed-icon-red': ''"> Test
                    <mat-icon mat-list-icon class="ti-heart"  (dblclick)="likePost(post)"></mat-icon>
                </span>
            </mat-list-item>
        </mat-list>
    </div>
</div>

Working-Demo