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

Question

我正在寻找一种方法来使用 angular

对 stars desc 显示的存储库进行排序

我试过添加 let repo of 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>

Answer 1

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

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

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

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

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

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

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

Sort the repositories by quantity of stars using github.api and angular

javascript

sorting

github-api

angular