Как применить единый стиль к выбранному элементу в * ngFor? - PullRequest
Новая
       83

Как применить единый стиль к выбранному элементу в * ngFor?

0 голосов
/ 28 мая 2020

в моем 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>

в соответствии с этим кодом класс 'in-row' применяется ко всем кнопкам, тогда как он должен применяться только к выбранным

Я новичок в использовании угла и не совсем понимаю, что делаю не так. Кто-то, кто может дать мне представление о том, что я делаю неправильно? Заранее спасибо.

1 Ответ

1 голос

Вам необходимо применить css к продукту с текущим id:
https://stackblitz.com/edit/stackoverflow-active-product-button


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

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',,
      styles: ['.in-row {    background: red;  }   ']
    })

    export class AppComponent {
      title = 'final';

      products = [
        { id: 1, name: 'product1' },
        { id: 2, name: 'product2' },
        { id: 3, name: 'product3' },
      ]

      selectedItem: any;
      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>
...