在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>
脏检查了解一下
ng
会对一些事件进行封装click
,mouseover
,keyup
等setTimout
和setInterval
Ajax
请求当你调用这些经过封装后的事件时就会去对比数据更新视图
ng2
使用了zone.js
监听异步