rxjs1

<li *ngFor="let fruit of fruitsList; let i = index;">{{i}}-{{fruit.name}}-{{fruit.price}}</li>
<p *ngIf="fruitsList.length > 3">fruitsList's length is bigger than 3</p>

Observable、observer、Subscription
Observable.fromEvent来方便的衔接事件。
常见的链接操作符：concat、merge、combineLates等
投影操作：map、flatMap，flatMap需要重点介绍
过滤：filter、distinctUltilChanges、
操作符分类：Operators by Categories
错误处理：catch、retry、finally
减压：debounce、throttle、sample、pausable
减少：buffer、bufferWithCount、bufferWithTime
如组件：xxx.component.ts、管道：xxx.pipe.ts、服务：xxx.service.ts等
(keyup.enter)
<input (keyup)="onKey($event)">
<input [(ngModel)]="hero.name">
onclick=ng-click=(click)
ng-src=[scr]
map()：遍历流
filter()：过滤流
do()：监视流（通常打个console而已）
catch()：捕获异常
subscribe()：订阅流（即执行）

this._heroService.getHeroes()
.subscribe(
heroes => this.heroes = heroes,
error => this.errorMessage = <any>error);
this.http.get(this._heroesUrl)
.map(res => <Hero[]> res.json().data)
.do(data => console.log(data)) // eyeball results in the console

1,this[监听器的对象]
2,event.target[当前目标对象]
<ul onclick="test()">
<li></li>
</ul>

1,你按那里都是:
<ul onclick="test()">
<li></li>
</ul>
2,他可能是ul or li

1,this[监听器的对象]
2,event.target[当前目标对象]
<ul onclick="test()">
<li></li>
</ul>

1,你按那里都是:
<ul onclick="test()">
<li></li>
</ul>
2,他可能是ul or li

1,删除fruits数组里的"apples", "oranges" 和 vegetables数组里carrots
{ $pull: { fruits: { $in: [ "apples", "oranges" ] }, vegetables: "carrots" } }
update( { _id: 1 }, { $pullAll: { fruits: [ "apples", "oranges" ] } } )
1.1,删除数组最后一个位置的元素. -1为最前.
$pop: { scores: 1 }

2,数组是json。更新数组里grade<=90 && mean >=80 的std原元为6
{_id: 4,grades: { $elemMatch: { grade: { $lte: 90 }, mean: { $gt: 80 } } }},
{ $set: { "grades.$.std" : 6 } }
{ grade: 85, mean: 90, std: 5 }===>{ grade: 85, mean: 90, std: 6 }.
3, letters添加'["c","d"]' 当一个对像.$addToSet与$push用法一样.$addToSet不添加重复的。
{ $addToSet: {letters: [ "c", "d" ] } }
letters添加 c,d
{ $addToSet: { letters: { $each: [ "c", "d" ] } } }
4,添加数组后倒序，取最前三个. -3取最后三个。
$push: {
quizzes: {
$each: [ { wk: 5, score: 8 }, { wk: 6, score: 7 }, { wk: 7, score: 6 } ],
$sort: { score: -1 },
$slice: 3
}
5,的第二个位置插入
$push: {scores: {$each: [ 20, 30 ],$position: 2}
不为[]
$match: { "inventory_docs": { $ne: [] } }

db.places.aggregate([
{
$geoNear: {
near: { type: "Point", coordinates: [ -73.99279 , 40.719296 ] },
distanceField: "dist.calculated",
maxDistance: 2,
query: { type: "public" },
includeLocs: "dist.location",
num: 5,
spherical: true
}
}
])

==========两次分组
db.campaigns.aggregate([
{ "$match": { "subscriber_id": { "$ne": null } }},

// Count all occurrences
{ "$group": {
"_id": {
"campaign_id": "$campaign_id",
"campaign_name": "$campaign_name",
"subscriber_id": "$subscriber_id"
},
"count": { "$sum": 1 }
}},

// Sum all occurrences and count distinct
{ "$group": {
"_id": {
"campaign_id": "$_id.campaign_id",
"campaign_name": "$_id.campaign_name"
},
"totalCount": { "$sum": "$count" },
"distinctCount": { "$sum": 1 }
}}
])

https://fe.ele.me/let-us-learn-rxjs/
1,
var weight = Rx.Observable.fromEvent(weightSliderElem, 'input')
.map(ev => ev.target.value)
.delay(1000);

var subscription = weight.subscribe(ev => {
weightTextElem.innerHTML = ev;
});

subscription.dispose();
2,
var source = ['1', '1', 'foo', '2', '3', '5', 'bar', '8', '13'];
var result = source
.map(x => parseInt(x))
.filter(x => !isNaN(x))
.reduce((x, y) => x+y);
3,rxjs Time
http://jsbin.com/cafodu/edit?html,js,output
4,signation
https://jsfiddle.net/DrakeLeung/vj368qy7/4/
var windowYOffsetObservable = Rx.Observable.fromEvent(window, 'scroll').map(function () {
// I don't actually care about the event, I just need to get the window offset (scroll position)
return window.pageYOffset;
});

1,page

<!DOCTYPE html>
<html manifest="/m.appcache">
页面ICON image/x-icon|image/gif
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="Bookmark" href="favicon.ico" /> png
预加载
<link rel="prefetch" href="./img/ad/home_03.jpg" />

<div class="block" #blockOne>
block one
</div>

angular2获得元素方法:
1,
@ViewChild('blockOne') block: ElementRef;
this.block.nativeElement.style.backgroundColor = color;
2,ionic2:
@ViewChild(Content) content: Content;
3,
constructor(public renderer: Renderer,@Inject(DOCUMENT) private document: Document) {}
let toTop = document.getElementById("toTop");
let inputElement = this.renderer.selectRootElement("input");
4,
@Directive({
selector : 'input[type=text][name=txt3]'
})

class Input1 {
constructor(public renderer: Renderer, public elementRef: ElementRef) {

}

focusMe() {

this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'focus', []);
}

}
==
@ViewChild(Input1) input;
http://plnkr.co/edit/3wufGFN4hiJ8JrTsGKxg?p=preview

renderer用法:
https://netbasal.com/angular-2-explore-the-renderer-service-e43ef673b26c#.9c4cbi3vo
let inputElement = this.renderer.selectRootElement("input");
this.renderer.invokeElementMethod(inputElement, “focus”, []);
let inputElement = this.renderer.createElement(this.nativeElement, “input”);
this.renderer.setElementAttribute(inputElement, “value”, “Hello from renderer”);
this.renderer.createText(buttonElement, “Click me!”);
this.renderer.setElementProperty(buttonElement, “disabled”, true);
this.renderer.listen(buttonElement, “click”, ( event ) => console.log(event));
this.renderer.setElementClass(buttonElement, "btn-large", true);
this.renderer.setElementStyle(buttonElement, “backgroundColor”, “yellow”);
https://plnkr.co/edit/8hhUkYQsJTudNuM6wzob?p=preview 动画

[输入型绑定]
1,父亲通过邦定传值给子
<child [(cName)]="pName"></child>
子:
@Input() public cName:string = 'thisIsIgnored';
OR
<my-app-block-two [broadcast]="broadcast1"></my-app-block-two>
broadcast1: EventEmitter;

constructor() {
this.broadcast1 = new EventEmitter<string>();
}
this.broadcast1.emit(color);
子:

@Input() broadcast: EventEmitter;
changeColor(color){
this.block.nativeElement.style.backgroundColor = color;
}

ngOnInit() {
this.broadcast.subscribe((color) => this.changeColor(color));
}
2,子通过邦定传值
<button (click)="changeColor()">Change Color</button>
@Output() colorChanged: EventEmitter;
this.colorChanged.emit(color);

<my-app-block-one (colorChanged)="onChanged($event)"></my-app-block-one>
http://blog.csdn.net/qq_15096707/article/details/52859110

rxjs1的更多相关文章

rxjs2学习
学习一个东西,一定不要管他怎么实现的,先详细的了解他的使用方法. 这篇博客的作用是都点到,书越读越薄,但是不详细阐述.为了记忆.如果想知道更详细,只能看相关的博客. 也是把以前看到的东西能串连起来. ...

随机推荐

详细的KVO总结,包括基本改变,使用案例,注意点.看我就够了!
概述 KVO全称Key-Value-Observing,也叫键值监听,是一种观察者设计模式.提供了一种机制,当指定的对象的属性被修改后,对象就会收到一个通知.也就是说每次指定的被观察的对象的属性被修改 ...
NOIP 2015 跳石头
题目背景一年一度的“跳石头”比赛又要开始了! 题目描述这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 N 块岩石(不 ...
Ze_Min Tree 主席树
前言主席树,也叫可持久化线段树,所以他的本质是颗线段树,而可持久化指的是这颗线段树可以访问过去某个时刻线段树上的信息. 应用应用的比较多的是查询区间的第k大值(因为其他的数据结构不好做). 实现 ...
点击VS2010调试按钮无反应
使用vs打开网站的方式分为两种. 1) 点击“在浏览器中查看”无反应的话,就点击“浏览方式”,选择一个浏览器进行查看. 2)第二中是直接点击调试按钮,结果浏览器无反应. 以上两种方法不成功的原因都是浏 ...
AngularJS的加载执行过程
1. HTML页面的加载,这会触发加载页面包含的所有JS (包括 AngularJS) 2. AngularJS启动,搜寻所有的指令(directive) 3. 找到ng-app,搜寻其指定的模块(M ...
【SQL Server】sql server更改了数据表的字段/新增数据表的字段无法保存
sql server更改了数据表的字段/新增数据表的字段无法保存解决方法:进入工具-->选项-->Designers-->表设计器和数据库设计器-->取消勾选即可
android多线程-AsyncTask之工作原理深入解析(下)
关联文章: Android 多线程之HandlerThread 完全详解 Android 多线程之IntentService 完全详解 android多线程-AsyncTask之工作原理深入解析(上) ...
【转载】网络攻击技术(三)——Denial Of Service & 哈希相关 & PHP语言 & Java语言
找到了这个系列的原始作者: http://www.cnblogs.com/rush/archive/2012/02/05/2339037.html 最近网络安全成了一个焦点,除了国内明文密码的安全事件 ...
LINUX 和WINDOWS下的自动登录小脚本
每天上班第一件事,就是连接公司LAB里面的机器,但首先要过一个防火墙,每次输用户名密码是很累人的事, 以下是两个脚本,可以放在启动项中,开机便自动登录 WINDOWS: @echo off ipcon ...
Ubuntu 10.10安装和使用pythonbrew简介
http://blog.csdn.net/nuccch/article/details/17595161 一.安装Pythonbrew 通过pythonbrew工具实现多版本Python管理,首先安装 ...

rxjs1

rxjs1的更多相关文章

随机推荐

热门专题