Question

我的表格组件已经实现了对订单进行排序的方法，并从API过滤了商品。

此刻，我正在使用一种简单的方法来隐藏标签。我的样子：

<thead>
    <tr>
      <th (click)="setOrderBy(attr.value)" scope="col" *ngFor="let attr of filteredAttribsList"  >
        {{ attr.name }}<i *ngIf="isOrdered" class="fa fa-sort orderable" aria-hidden="true"></i>
      </th>
      <th scope="col">Opções</th>
    </tr>
  </thead>

尽管使用*ngIf指令隐藏标签，但*ngFor重叠并使其用于所有iten，我只想显示有序列的标签。我正在使用它来更改isOrdered的值

if (!this.isOrdered) this.isOrdered = true

Answer 1

isOrdered，因为Array应该可以解决问题。

isOrdered = new Array();

ngOnInit() {
    for(let attr in filteredAttribsList) {
        this.isOrdered[attr.value] = false;
    }
}

setOrderBy(value) {
    for(let attr in this.filteredAttribsList) {
        this.isOrdered[attr.value] = false; // make sure that there is only 1 true
    }
    if (!this.isOrdered[value]) this.isOrdered[value] = true;
}

<i *ngIf="isOrdered[attr.value]" class="fa fa-sort orderable" aria-hidden="true"></i>

Answer 2

如果仅按单个属性值订购，只需将isOrdered设置为属性值

模板

<thead>
 <tr>
  <th (click)="setOrderBy(attr.value)" scope="col" *ngFor="let attr of filteredAttribsList">
        {{ attr.name }}<i *ngIf="isOrdered == attr.value" class="fa fa-sort orderable" ></i>
      </th>
      <th scope="col">Opções</th>
 </tr>
</thead>

组件

setOrderBy(value) {
   this.isOrdered = value;
}

，如果要支持多个属性值

组件

isOrdered = {};

setOrderBy(value) {
    this.isOrdered[value] = !this.isOrdered[value];
}

模板

<thead>
  <tr>
   <th (click)="setOrderBy(attr.value)" scope="col" *ngFor="let attr of filteredAttribsList">
        {{ attr.name }}<i *ngIf="isOrdered[attr.value]" class="fa fa-sort orderable" ></i>
      </th>
      <th scope="col">Opções</th>
    </tr>
  </thead>

最后，如果您想重置，请清除所有属性

reset(){
   this.isOrdered[value]
}

仅在订购时显示<i>标签

2 个答案: