角2-根据属性值设置的类

Question

假设我有几个按钮来对列表进行排序：

<a class="order-by" href="#" (click)="Sort('id')" [ngClass]="{active: sortBy==='id'}">Id</a>
<a class="order-by" href="#" (click)="Sort('name')" [ngClass]="{active: sortBy==='name'}">Name</a>
<a class="order-by" href="#" (click)="Sort('age')" [ngClass]="{active: sortBy==='age'}">Age</a>

我两次使用每个按钮的值('id‘、'name’& 'age') --用于click事件并设置'active‘类。我想把这个价值定在一个地方--我想到了一件服装。差不多吧-

<a class="order-by" href="#" [attr.sorting-value]="id" (click)="Sort([attr.sorting-value])" [ngClass]="{active: sortBy===[attr.sorting-value]}">Id</a>

但这不管用。

还有其他的可能吗？

谢谢

Answer 1

我建议您通过*ngFor呈现这样的重复元素，因此您的模型将属于组件。

<a class="order-by" href="#"
  *ngFor="let item of list" 
  (click)="Sort(item.name)" [ngClass]="{ 'active': isActive(item.name) }">
 {{item.description}}
</a>

码

list = [
  {name: 'id', description: 'Id'},
  {name: 'name', description: 'Name'},
  {name: 'age', description: 'Age'},
];

isActive(name: string){
   return name === this.sortBy;
}