Блог

Я выполнил реализацию всей части пользовательского интерфейса. это выглядит

и мои данные

 public filters = [
    {
      tag: 'Year',
      label: 'year',
      items: [2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020]
    },
    {
      tag: 'Cash On Delivery',
      label: 'cash',
      items: this.truthyFalsy
    },
    {
      tag: 'In stock',
      label: 'stock',
      items: this.truthyFalsy
    }
  ];
  

и мой HTML-код

       <div *ngFor="let filter of filters">
        <p ><small>{{filter?.tag}}</small></p>
        <div class="line"></div>
        <div>
          <div class="item" *ngFor="let item of filter?.items">
            <button class="btn" [ngClass]="{'btn-active-1':labelType1 === filter.label  amp;amp; selectedItem === item }"
              (click)="select(item,filter?.label)">{{item}}</button>
          </div>
        </div>
      </div>
  

и на выбранной кнопке я должен сделать ее активной.

На самом деле мое требование

1. в year section я должен сделать любой из них активным
2. в Cash On delivery я должен сделать любой из них активным
3. и в In stock я должен сделать любой из них активным

В каждом разделе я должен сделать так, чтобы хотя бы одна кнопка была активной, используя ngClass

Рабочая демонстрация

При нажатии кнопки вы можете передать индекс элемента и метку, чтобы различать все типы разделов и их кнопки.

  /* initialize empty object of selectedItem where we can set key(lable)
 and value(index) on each button click from key(label) and value(index)
 we can identify the selected button of each section */
 selectedItem = {};
  

select метод включить кнопку, если пользователь нажмет на уже выбранную кнопку, она удалит выбранную кнопку, иначе кнопка будет выбрана.

   select(index, label) {
    if(this.selectedItem[label] === index) {
      delete this.selectedItem[label]
    } else {
      this.selectedItem = {
      ...this.selectedItem,
     [label]: index
   };
  }
}
  

В шаблоне все, что вам нужно передать index и label из select метода и добавить условный активный класс, поместив [class.btn-active-1]="selectedItem[filter.label] === i"

  <div *ngFor="let filter of filters;">
    <p ><small>{{filter?.tag}}</small></p>
    <div class="line"></div>
    <div>
      <div class="item" *ngFor="let item of filter?.items; let i=index">
        <button class="btn" [class.btn-active-1]="selectedItem[filter.label] === i"
          (click)="select(i,filter?.label)">{{item}}</button>
      </div>
    </div>
  </div>
  

Я создал образец для вас здесь, на Stackblitz.

Вы можете использовать let i = index для выбора элементов по индексу и выбора элемента по умолчанию. Итак, попробуйте это, чтобы выбрать первый элемент в каждой группе:

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  labelType1: string = "";
  public selectedItem = { year : 0, cash: 0, stock: 0  };
  truthyFalsy: any[] = [true, false];
  public filters = [
    {
      tag: 'Year',
      label: 'year',
      items: [2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020]
    },
    {
      tag: 'Cash On Delivery',
      label: 'cash',
      items: this.truthyFalsy
    },
    {
      tag: 'In stock',
      label: 'stock',
      items: this.truthyFalsy
    }
  ];

  select(index, label){
    this.selectedItem[label] = index;
  }
}
}
  

app.component.html

 <div *ngFor="let filter of filters">
    <p><small>{{filter?.tag}}</small></p>
    <div class="line"></div>
    <div>
        <div class="item" *ngFor="let i=index; let item of filter?.items">
            <button class="btn" [ngClass]="{'btn-active-1': selectedItem[filter.label] === i}" (click)="select(i,filter?.label)">{{item}}</button>
        </div>
    </div>
</div>