如何将单个样式应用于 *ngFor 中的选定元素？

Question

在我的 Angular 应用程序中，我将通过以下对象数组在屏幕上显示我的元素

[{
  "name": "Equipment",
  "functional_id": "furniture",
  "products": [
    {
      "file": "data:image/;base64,",
      "name": "White bags",
      "description": "Reusable",
      "id": 11,
      "path": "",
      "items": [
        {
          "name": "Small model",
          "description": "25",
          "price": 0,
          "functional_id": "white_bags_small_model_by_25"
        },
        {
          "name": "Medium model",
          "description": "20",
          "price": 0,
          "functional_id": "white_bags_medium_model_by_20"
        },
        {
          "name": "Large model",
          "description": "10",
          "price": 0,
          "functional_id": "white_bags_large_model_by_10"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Burgundy bags",
      "description": "Reusable",
      "id": 12,
      "path": "",
      "items": [
        {
          "name": "Small model",
          "description": "25",
          "price": 0,
          "functional_id": "bags_burgundy_bags_small_model_by_10"
        },
        {
          "name": "Large model",
          "description": "Par 10",
          "price": 0,
          "functional_id": "bags_burgundy_bags_large_model_by_10"
        }
      ]
    }    
  ],
  "sorting": 2300"
},
{
  "name": "Documents",
  "functional_id": "docs",
  "products": [
    {
      "file": "data:image/;base64,",
      "name": "Book of conventions",
      "id": 17,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "agreement_book"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Procedure posters",
      "description": "Procedure",
      "id": 18,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "posters_procedure_of_taking_in_charge"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Services Brochures",
      "description": "Brochures",
      "id": 19,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "services_brochures"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Catalogue",
      "id": 20,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "catalogue"
        }
      ]
    }
  ],
  "sorting": 2400
},
{
  "name": "Products",
  "functional_id": "prods",
  "products": [
    {
      "file": "data:image/;base64,",
      "name": "Articles",
      "id": 19,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "book_1"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Procedure_b",
      "description": "Procedure",
      "id": 24,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "book_charge"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Book Services",
      "description": "Book Services",
      "id": 26,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "book_services"
        }
      ]
    },
    {
      "file": "data:image/;base64,",
      "name": "Catalogue",
      "id": 32,
      "path": "",
      "items": [
        {
          "price": 0,
          "functional_id": "catalogue"
        }
      ]
    }
  ],
  "sorting": 4400
}
]

接下来，我为每种类型的产品绘制以下按钮，并且我想仅将一个类应用于选定的一个。我在我的 html 中设置了以下内容：

            <div class='child'>
              <div>
                <ul class='p-0 m-0'> 
                  <li *ngFor='let item of product.items; let i = index'>                
                    <button class='cart' [ngClass]="{'in-row': i === product.items.length - 1}" (click)='this.updateCart()'><i class='icon-addcart'></i></button>
                  </li>
                </ul>
              </div>
            </div>

根据此代码，“行内”类被应用于所有按钮，而它应该只应用于选定的按钮

我对使用角度有点陌生，我真的不明白我做错了什么。谁能告诉我我做错了什么？ 提前谢谢你。

Answer 1

您需要将 css 应用到具有当前 id 的产品：
https://stackblitz.com/edit/stackoverflow-active-product-button

从'@angular/core'导入{组件，OnInit}； @零件（{ 选择器：'应用程序根'， templateUrl: './app.component.html',, 样式：['.in-row { 背景：红色； }'] }) 导出类 AppComponent { 标题='最终'; 产品 = [ { id: 1, name: 'product1' }, { id: 2, 名称: 'product2' }, { id：3，名称：'product3'}， ] 选定项目：任何； updateCart(id: number) { this.selectedItem = id; } }

<li *ngFor='let item of products; let i = index'>
  <button class='cart' [ngClass]="{'in-row': selectedItem == item.id}" (click)='updateCart(item.id)'><i
          class='icon-addcart'></i>button {{ i }}</button>
</li>