在每个部分上应用ngClass

编程问答 2022-06-13

问题描述

我已经完成了所有UI部分的实现。看起来

enter image description here

我的数据是

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  && selectedItem === item }"
              (click)="select(item,filter?.label)">{{item}}</button>
          </div>
        </div>
      </div>

在选定的按钮上，我必须将其激活。

实际上我的要求是

  1. 在 year section 中，我必须激活任何一个人
  2. 在 Cash On delivery 中，我必须激活任何一个人
  3. 并且在 In stock 中，我必须激活任何一个人

在每个部分中，我必须使用 ngClass

使其至少一个按钮处于活动状态

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularng-classtypescripttypescript