角度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渲染此類重復元素，因此您的模型將屬於component。

<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;
}