Question

我有一个循环的列表。单击任何块时，我必须添加类active。我不确定如何使用[ngClass]来做到这一点。请帮助我。

这是HTML代码：

<div *ngFor="let cell of myData">
    <div class="list-header">
        <label>{{ cell.name }}</label>
    </div>
    <div class="list-group">
        <a class="list-group-item list-group-item-action d-flex" *ngFor="let unit of cell.array" (click)= "onClick()" [ngClass]="{'active': this.active}">
            <label>{{ unit }}</label>
        </a>
    </div>
</div>

我的TS代码：

myData = [
{
  'name': 'abc',
  'array': ["asass","From Mac","New", "test 1", "test 10", "test 2", "test 3", "test 4", "test 5", "test 6", "test 7", "test 8", "test 9" ]
},
{
  'name': 'all types and options',
  'array': ['Camera','del TYPE','Fan','hardware','icons','mobile','new asset type']
},
{
  'name': 'am cat',
  'array': ['am type','camera','new 423423']
},
{
  'name': 'cat with no asset types, dec added',
  'array': ['camera']
},
{
  'name': 'cat with one asset type',
  'array': ['camera']
},
{
  'name': 'colors',
  'array': ['pink', 'yellow']
}
];

Answer 1

<div class="my_class" (click)="clickEvent()"  
    [ngClass]="active ? 'success' : 'danger'">                
     Some content
</div>

active: boolean = false;
clickEvent(){
    this.active = !this.active;       
}

Answer 2

模板：

<div *ngFor="let cell of myData">
      <div class="list-header">
        <label>{{ cell.name }}</label>
      </div>
      <div class="list-group">
        <a class="list-group-item list-group-item-action d-flex" *ngFor="let unit of cell.array; let i = index" (click)= "cell.selectedIndex=i" [ngClass]= "{ 'active': cell.selectedIndex === i }" >
          <label>{{ unit }}</label>
        </a>
      </div>
    </div>

如何在角度元素中向循环元素添加动态类

2 个答案: