Angular数据库排序

时间:2018-10-10 20:09:00

标签: html angular sql-order-by mean web-frontend

因此,我正在为我的网站创建一个博客。数据库工作正常,但是我的帖子顺序不正确。顶部是最旧的​​,而我想要顶部中的最新的。由于我使用的是MEAN / Angular,因此我很难在我的代码中使用任何JavaScript。任何人都可以帮助我通过仅使用前端代码而不使用JavaScript的新数据库来订购数据库吗?

<div class="container">
        <div class="row" *ngFor="let b of allBlogs">
          <div class="col-lg-8 col-md-10 mx-auto">
            <div class="post-preview" class="animated zoomIn delay-2s">
              
                <h2 class="post-title" style="margin: 30px; font-size:30px;font-weight: bold; text-align: center; font-family:'Courier New', Courier, monospace">
                        {{b.title}}
                </h2>
                <h5 class="post-subtitle" style="margin: 30px; font-size:12px;font-weight: bold; text-align: left; font-family:'Courier New', Courier, monospace">
                       Category:  {{b.category}}
                </h5>
                <h4 class="post-subtitle" style="margin: 30px; font-size:15px;font-weight: normal; text-align: justify; font-family:'Courier New', Courier, monospace">
                        {{b.content}}
                </h4>

              <p class="post-meta" style="margin: 30px; font-size:12px;font-weight: bold; text-align: left; font-family:'Courier New', Courier, monospace">Posted by Tico
                
                on {{b.created_at}}</p>
            </div>
            <hr>
            </div>
            </div>
            </div>

1 个答案:

答案 0 :(得分:0)

您可以编写自己的orderBy管道,但是Angular不得不说this

  

Angular不提供用于过滤或排序列表的管道。   熟悉AngularJS的开发人员将其称为filter和orderBy。   Angular中没有等效项。

     

这不是疏忽。 Angular不提供这样的管道,因为它们   效果不佳并阻止过度缩小。过滤器和   orderBy需要引用对象属性的参数。   几乎在每个更改检测周期中,Angular调用不纯管道。

     

过滤尤其是排序是昂贵的操作。用户   即使是中等大小的列表,体验也会严重恶化   Angular每秒多次调用这些管道方法。过滤和   AngularJS应用经常滥用orderBy,从而导致   抱怨Angular本身很慢。该指控在   间接感觉AngularJS通过以下方式准备了此性能陷阱   首先提供filter和orderBy。

我建议您在服务中使用array.sort,该服务正在从您的数据库中获取数据。这样,您可以避免上面提到的一些性能开销。

this.httpClient.get("my/server/address").subscribe((data) => { 
    data.sort((a, b) => { 
        return a.date < b.date ? 1 : -1; // not sure if the 1's should swap here
    });
});