Ionic 如何在Angular中对列表进行正确排序?

soat7uwm  于 2022-12-16  发布在  Ionic
关注(0)|答案(1)|浏览(161)

我有以下简单的排序算法:在我的HTML文件中,我从JSON中获得了表的列名,我想对它进行向上和向下排序。使用sortData方法,排序应该根据所选的列来执行。但是,列表没有排序。

<ion-row>
          <ion-col style="width: 5em;" *ngFor="let column of columnsHeader.controls " (click)="sortData(column.name)">
            <div class="table__header" id="hoverId">{{column.name}}</div>
          </ion-col>
          <ion-col style="width: 3em;">
            <div class="table__header"></div>
          </ion-col>
        </ion-row>

我在页面中的排序算法

sortData(value: any){
    console.log(value);
    if (this.sortColumn) {
      const newarr = this.tableInformation.sort((a, b) => a.value - b.value);
      this.tableInformation = newarr;
    }
    else {
      const newarr = this.tableInformation.sort((a, b)=> b.value - a.value);
      this.tableInformation= newarr;
    }
    this.sortColumn=!this.sortColumn;
    console.log(this.sortColumn);

    console.log(this.tableInformation);
  }

console.log(value)正确地给出了我想要的列名。但是,我的列表不能按值排序。但是,如果我硬编码我的排序算法,并输入例如id或其他列名,那么我的列表将按硬编码的名称排序。除非列有字符串值,否则不幸的是,它也不起作用。

sortData(value: any){
    console.log(value);
    if (this.sortColumn) {
      const newarr = this.tableInformation.sort((a, b) => a.id - b.id);
      this.tableInformation = newarr;
    }
    else {
      const newarr = this.tableInformation.sort((a, b)=> b.id - a.id);
      this.tableInformation= newarr;
    }
    this.sortColumn=!this.sortColumn;
    console.log(this.sortColumn);

    console.log(this.tableInformation);
  }

现在回答我的问题:
1.如何使用值对列表进行正确排序?
1.我希望在标题中为所需列的排序设置箭头,以指示排序的内容。我如何将箭头添加到列表标题中?
先谢了。

c9x0cxw0

c9x0cxw01#

a.value - b.value查找a和B上的属性value,该属性可能未定义
您可能希望使用a[value] - b[value]
对于箭头,可以使用<ion-icon name="arrow-down-outline"></ion-icon>,逻辑类似于<ion-icon *ngIf="sortingAscended(colname)" name="arrow-up-outline"></ion-icon>

相关问题