javascript - 使用 github.api 和 angular 按星数对存储库进行排序

Question

我正在寻找一种方法来使用 angular 对 stars desc 显示的存储库进行排序

我试图添加让 repo 的 repos | 排序依据

但不工作

<div class="panel panel-default">
  <div class="panel-heading">
        <h3 class="panel-title">Repos</h3>
  </div>
  <div class="panel-body" *ngFor="let repo of repos">
        <p class="clearfix">
            <span class="repo-title">{{repo.name}}</span>
            <a href="{{repo.html_url}}" class="btn btn-sm btn-warning pull-right" 
               target="_blank">Veja este projeto no Github</a>
        </p>
       <p>{{repo.description}}</p>
       <p><img class="star" src="../../../assets/img/star.png" alt="">{{repo.stargazers_count}}</p>
  </div>
</div>

标签： javascriptangularsortinggithub-api

Answer 1

与 AngularJS 不同，Angular 2+ 不提供orderBy用于过滤和排序列表的管道，因为它们表现不佳并防止激进的缩小（参考：https ://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe ）

相反，您可以使用 Arraysort()方法对组件中的数据进行排序。

要按星号升序对存储库进行排序：

this.repos.sort((a, b) => {
    return a.stargazers_count - b.stargazers_count;
});

同样，要按星号降序对存储库进行排序：

this.repos.sort((a, b) => {
    return b.stargazers_count - a.stargazers_count;
});