Javascript 基于数组值切换角度组件CSS类

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

对象是一个post（testdata/posts.ts），包含一个like数组

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

所以我的组件类型脚本是这样的，添加和删除一个类似的帖子，这是可行的

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

从'@angular/core'导入{Component}；
从“../test data/user”导入{user}；
从“../test data/posts”导入{posts}；
@组成部分({
选择器：“应用程序源”，
templateUrl:“./feed.component.html”，
样式URL:['./feed.component.css']，
})
出口级饲料组件{
职位=职位；
用户=用户；
喜欢=错误；
likePost（邮政）{
//如果帖子是喜欢的，请删除喜欢的帖子
如果（这是一个孤岛（邮政））{
for（设i=0；i

我可以检索对象，添加/删除组件的likes，但是如何检查数组以确定帖子应该显示为liked还是unliked

我当前的html模板是这样的，如果用户id（user.id）出现在post like数组（post.likes）中，我希望有一个额外的类“feed icon red”

编辑：我想检查数组中的特定值以设置类。 e、 g.如果（post.likes.includes（1））将图标类设置为“feed icon red”

您可以使用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>

{{isLiked（post）}
试验

---

判断一篇文章是否受到欢迎的逻辑似乎存在问题

在这里，尝试一下：

import { Component } from '@angular/core';
import { user } from './test-data/user';
import { posts } from './test-data/posts';

/**
 * @title Basic list
 */
@Component({
  selector: 'list-overview-example',
  templateUrl: 'list-overview-example.html',
  styleUrls: ['list-overview-example.css'],
})
export class ListOverviewExample {
  posts = posts;
  user = user;

  liked = false;

  likePost(post) {
    // If post is liked, remove like
    if (this.isLiked(post)) {
      post.likes.splice(post.likes.indexOf(this.user.id), 1);
      // If not liked add a new like
    } else {
      post.likes.push(this.user.id);
    }
    // DEBUG: Log post data
    console.log(post);
  }

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

在模板中：

<div *ngIf="posts.length">
    <ul>
    <li *ngFor="let post of posts">
        <!-- Post Media -->
        <img class="feed-image" [src]="post.media" (dblclick)="likePost(post)"/>
    <!-- Interaction Button Row -->
    <span [class.feed-icon-red]="post.likes.includes(user.id)" (dblclick)="likePost(post)">❤</span>
    </li>
  </ul>
</div>

❤

---

这是给你的裁判的一封信

---

那么你想像count一样显示吗？@PrashantPimpale不想显示count，我只想添加一个类，将颜色更改为reduse，如所示@Musa ok，然后选中ngClass。试着让我们知道工作与否谢谢@PrashantPimpale我在我的html中实现了[class.feed icon red]=“isLiked（post）”，它可以工作