求问,初学angular,Angular2权威指南书中1.11.2,基于分数的重新排序的问题

在Angular2权威指南1.11.2中,基于分数的重新排序
排序的方法没什么难理解的,就是sort排序

sortedArticles(): Article[] {
    return this.articles.sort((a: Article, b: Article) => b.votes - a.votes);
}

html模板代码

<div class="ui grid posts">
    <app-article *ngFor="let article of sortedArticles()" [article]="article">
    </app-article>
</div>

votes是该article的投票数。每次调用article类的投票方法时,这里都会自动重新排序渲染。请问一下,这个是怎么触发自动排序的?是什么原理?请大神帮忙分析一下,初学angular,各种不明白。
下面的代码是Article类

export class Article {
    title : string;
    link : string;
    votes : number;
  constructor(title : string, link : string, votes?: number) {
    this.title = title;
    this.link = link;
    this.votes = votes || 0;
  }

  voteUp() : void {
    this.votes += 1;
  }
  voteDown() : void {
    this.votes -= 1;
  }

app-article代码:

<div class="twelve wide column">
  <a class="ui large header" href="{{ article.link }}">
    {{ article.title }}
  </a>
  <div class="meta">({{ article.domain() }})</div>
  <ul class="ui big horizontal list voters">
    <li class="item">
      <a href (click)="voteUp()">
        <i class="arrow up icon"></i>
        upvote </a>
    </li>
    <li class="item">
      <a href (click)="voteDown()">
        <i class="arrow down icon"></i>
        downvote
      </a>
    </li>
  </ul>
</div>
阅读 1.9k
1 个回答

脏检查了解一下
ng会对一些事件进行封装

  1. 浏览器事件 click, mouseover, keyup
  2. setTimoutsetInterval
  3. Ajax 请求

当你调用这些经过封装后的事件时就会去对比数据更新视图
ng2使用了zone.js 监听异步

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进