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

Question

在我的角度应用程序中，我正在遍历以下对象的数组以在屏幕上显示我的元素

[{
  "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'导入{Component，OnInit};@零件（{选择器：“ app-root”，templateUrl：“ ./ app.component.html”，样式：['。in-row {背景：红色； }']}）导出类AppComponent {title ='最终';产品= [{id：1，名称：'product1'}，{id：2，名称：'product2'}，{id：3，名称：“ product3”}，]selectedItem：任意；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>