在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5/ 求問,初學angular,Angular2權威指南書中1.11.2,基于分數(shù)的重

求問,初學angular,Angular2權威指南書中1.11.2,基于分數(shù)的重新排序的問題

在Angular2權威指南1.11.2中,基于分數(shù)的重新排序
排序的方法沒什么難理解的,就是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的投票數(shù)。每次調用article類的投票方法時,這里都會自動重新排序渲染。請問一下,這個是怎么觸發(fā)自動排序的?是什么原理?請大神幫忙分析一下,初學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>
回答
編輯回答
胭脂淚

臟檢查了解一下
ng會對一些事件進行封裝

  1. 瀏覽器事件 click, mouseover, keyup
  2. setTimoutsetInterval
  3. Ajax 請求

當你調用這些經(jīng)過封裝后的事件時就會去對比數(shù)據(jù)更新視圖
ng2使用了zone.js 監(jiān)聽異步

2017年11月30日 08:40