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>

我使用每个按钮的值（＆＃39; id＆＃39;，＆＃39; name＆＃39;＆amp;＆＃39; age＆＃39;）两次 - 对于点击事件和设置“活跃”＆＃39;类。我希望将这个值设置在一个地方 - 我想到了一个问题。这样的事情 -

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

Angular 2 - 根据属性值设置类

1 个答案: