ng对于单击时的项目 div 切换类

Question

我有一个 ngFor 从 .ts 文件获取静态数据，我试图在所选项目上添加活动类，问题是因为它在 ngfor 中它会切换列表中每个项目的类。如何将活动类添加到所选项目？

    <div
        class="mb-2 item rounded bg-white border"
        *ngFor="let item of keys(); let i = index"
        (click)="ItemSelectClick(item)"
        [ngClass]="ItemSelectStatus ? 'active' : ''">
        <a href="javascript:void(0)" class="cursor-pointer">
          <figure>
            <div class="p-5">
              <img
                src="{{ item[1].image }}"
                class="rounded-t mx-auto mb-4"
                width="75"
              />
              <figcaption>
                <p class="text-lg mb-3 font-semibold leading-relaxed">
                  {{ item[1].name }}
                </p>

                <div class="flex justify-between">
                  <span class="leading-5 font-semibold">
                    {{ item[1].calories }} Cal.
                  </span>
                  <span class="leading-5 font-semibold">
                    ${{ item[1].price }}
                  </span>
                </div>
              </figcaption>
            </div>
          </figure>
        </a>
      </div>

import { Component, inject, OnInit, ViewChild } from "@angular/core";
import { CartItemService } from "src/app/shared/services/cart-item.service";
import { ToastService } from "src/app/shared/services/helpers/toaster.service";

@Component({
  selector: "wrap-menu",
  templateUrl: "./wrap-menu.component.html",
  styleUrls: ["./wrap-menu.component.scss"],
})
export class wrapComponent implements OnInit {
  toastService = inject(ToastService);

  isSelected = false;
  selectedItem: any;
  showToaster: boolean = false;
  toasterMessage: string = "";

  chickenMenuItem = [
    {
      id : 1,
      name: "Shawarma",
      image: "../../../assets/images/kebab.png",
      calories: "34",
      price: "23",
    },
    {
      id : 2,
      name: "American Roll",
      image: "../../../assets/images/wrap2.png",
      calories: "23",
      price: "24",
    },
    {
      id : 3,
      name: "Mexican Kebab",
      image: "../../../assets/images/item.png",
      calories: "34",
      price: "75",
    },
    {
      id : 5,
      name: "Kebab",
      image: "../../../assets/images/wrap1.png",
      calories: "53",
      price: "35",
    },
    {
      id : 6,
      name: "Spicy Fries",
      image: "../../../assets/images/kebab.png",
      calories: "22",
      price: "23",
    },
    {
      id : 7,
      name: "Turkish Kebab",
      image: "../../../assets/images/item.png",
      calories: "35",
      price: "45",
    },
    {
      id : 8,
      name: "Chicken Noodels",
      image: "../../../assets/images/item.png",
      calories: "23",
      price: "45",
    },
    {
      id : 9,
      name: "Crispy Wings",
      image: "../../../assets/images/kebab.png",
      calories: "34",
      price: "98",
    },
  ];

  constructor(private cartItemServices: CartItemService) {}

  ItemSelectStatus: boolean = false;

  ItemSelectClick(item: any) {
    this.isSelected = true;
    this.ItemSelectStatus = !this.ItemSelectStatus;
    this.selectedItem = item;
    
  }

  ngOnInit(): void {

  }

  addItem() {
    this.cartItemServices.addItem(this.selectedItem);
    this.showToast("Item Added Successfully");
  }

  showToast(message: string): void {
    this.toasterMessage = message;
    this.showToaster = true;
    setTimeout(() => this.hideToaster(), 3000);
  }

  hideToaster(): void {
    this.showToaster = false;
    this.toasterMessage = "";
  }

  keys(): Array<any> {
    console.log(Object.entries(this.chickenMenuItem));
    return Object.entries(this.chickenMenuItem);
  }

  onCancel() {
    this.isSelected = false;
  }

  selectedIndex: number = null;



}

Answer 1

向对象添加

isActive

属性以保存和更改单击的项目状态：

    {
      id : 1,
      name: "Shawarma",
      image: "../../../assets/images/kebab.png",
      calories: "34",
      price: "23",
      isActive: false,
    }

然后修改模板以使用该值：

[ngClass]="item.isActive ? 'active' : ''">