Angular 排序角度表不使用材料，只是排序方法？

table.component.html

单击标题时，函数必须对所有列进行ASC/DESC排序

<table>
<tr>
  <th *ngFor="let col of columns" (click)="sortTable(col)">{{col}}</th>
</tr>
<tr *ngFor="let user of users">
  <td *ngFor="let col of columns">{{user[col]}}</td>
</tr>
</table>

---

您是否考虑过使用现有管道进行排序，而不是编写自己的管道？ 例如：

更直接地说，这是：

使用该软件包，您只需单击以设置一个变量来确定orderby以及它是ASC还是DESC，如前缀所示

例如，来自文件：

<!-- Returns array ordered by value of property -->
<p>{{ deepObj | orderBy: 'amount' }}</p>  
<!-- Output: [{id: 3, ...}, {id: 4, ...}, {id: 2, ...}, {id: 1, ...}] -->
<p>{{ deepObj | orderBy: '-amount' }}</p>  
<!-- Output: [{id: 1, ...}, {id: 2, ...}, {id: 4, ...}, {id: 3, ...}] -->

{{deepObj | orderBy:'amount'}}

{{deepObj | orderBy:'-amount'}}

您是否考虑过使用现有管道进行排序，而不是编写自己的管道？ 例如：

更直接地说，这是：

使用该软件包，您只需单击以设置一个变量来确定orderby以及它是ASC还是DESC，如前缀所示

例如，来自文件：

<!-- Returns array ordered by value of property -->
<p>{{ deepObj | orderBy: 'amount' }}</p>  
<!-- Output: [{id: 3, ...}, {id: 4, ...}, {id: 2, ...}, {id: 1, ...}] -->
<p>{{ deepObj | orderBy: '-amount' }}</p>  
<!-- Output: [{id: 1, ...}, {id: 2, ...}, {id: 4, ...}, {id: 3, ...}] -->

{{deepObj | orderBy:'amount'}}

{{deepObj | orderBy:'-amount'}}

我对反向排序有问题，所以我喜欢这样做，而且它可以工作

export class DynamicTableComponent implements OnInit {
  @Input()
  users = [];
  @Input()
  columns: string[];

  direction = false;

  sortTable(param) {
    this.direction = !this.direction;
    const compare = (a, b) => {
        if (!a[param] && !b[param]) {
          return 0;
        } else if (a[param] && !b[param]) {
          return -1;
        } else if (!a[param] && b[param]) {
          return 1;
        } else {
          const value1 = a[param].toString().toUpperCase(); // ignore upper and lowercase
          const value2 = b[param].toString().toUpperCase(); // ignore upper and lowercase
          if (value1 < value2) {
            return !this.direction ? -1 : 1;
          } else if (value1 > value2) {
            return !this.direction ? 1 : -1;
          } else {
            return 0;
          }
        }
      };
    return this.users.sort(compare);
    //this.users = MYITEMS
    }

导出类DynamicTableComponent实现OnInit{
@输入（）
用户=[]；
@输入（）
列：字符串[]；
方向=假；
可排序（参数）{
this.direction=！this.direction；
常量比较=（a，b）=>{
如果（！a[param]&&！b[param]）{
返回0；
}else if（a[param]&&！b[param]）{
返回-1；
}如果（！a[param]&&b[param]）{
返回1；
}否则{
const value1=a[param].toString（）.toUpperCase（）；//忽略大小写
const value2=b[param].toString（）.toUpperCase（）；//忽略大小写
如果（值1<值2）{
返回！这个方向？-1:1；
}否则如果（值1>值2）{
返回！这个方向？1:-1；
}否则{
返回0；
}
}
};
返回此.users.sort（比较）；
//this.users=MYITEMS
}

我对反向排序有问题，所以我喜欢这样做，而且它可以工作

export class DynamicTableComponent implements OnInit {
  @Input()
  users = [];
  @Input()
  columns: string[];

  direction = false;

  sortTable(param) {
    this.direction = !this.direction;
    const compare = (a, b) => {
        if (!a[param] && !b[param]) {
          return 0;
        } else if (a[param] && !b[param]) {
          return -1;
        } else if (!a[param] && b[param]) {
          return 1;
        } else {
          const value1 = a[param].toString().toUpperCase(); // ignore upper and lowercase
          const value2 = b[param].toString().toUpperCase(); // ignore upper and lowercase
          if (value1 < value2) {
            return !this.direction ? -1 : 1;
          } else if (value1 > value2) {
            return !this.direction ? 1 : -1;
          } else {
            return 0;
          }
        }
      };
    return this.users.sort(compare);
    //this.users = MYITEMS
    }

导出类DynamicTableComponent实现OnInit{
@输入（）
用户=[]；
@输入（）
列：字符串[]；
方向=假；
可排序（参数）{
this.direction=！this.direction；
常量比较=（a，b）=>{
如果（！a[param]&&！b[param]）{
返回0；
}else if（a[param]&&！b[param]）{
返回-1；
}如果（！a[param]&&b[param]）{
返回1；
}否则{
const value1=a[param].toString（）.toUpperCase（）；//忽略大小写
const value2=b[param].toString（）.toUpperCase（）；//忽略大小写
如果（值1<值2）{
返回！这个方向？-1:1；
}否则如果（值1>值2）{
返回！这个方向？1:-1；
}否则{
返回0；
}
}
};
返回此.users.sort（比较）；
//this.users=MYITEMS
}

可能重复：@Headlush我看到了你的链接，非常有用…我搜索了所有内容。现在我修复了数字列的问题，正如你在我的编辑文档中看到的那样。DESC排序的问题仍然存在，只是ASC，有什么建议吗？调用

数组时追加
反向
。使用provid中的变量进行排序如果答案不正确，它将是例如
objs.sort（compare.reverse（））
@TheHeadRush我需要一些东西，比如auto，+1/-1，什么时候是ASC或DESC。我在那个链接上看到了一些东西，但什么都没用…@TheHeadRush好的，完成了，我现在就回答我自己的问题。谢谢！可能重复：@TheHeadRush我看到了你的链接，它非常有用…我搜索了所有东西。现在我修复了你在中看到的数字列的问题我的编辑文档。DESC排序的问题仍然存在，只是ASC，有什么建议吗？调用
array.Sort
时追加
reverse
。使用提供的答案中的变量，它将是例如
objs.Sort（compare）.reverse（）
@TheHeadRush我需要一些自动的东西，+1/-1当是ASC或DESC时。我在那个链接上看到了一些东西，但没有任何效果…@TheHeadRush好的，完成了，我现在就回答我自己的问题。谢谢！