rxjs1
阅读原文时间:2023年07月11日阅读:2

  • {{i}}-{{fruit.name}}-{{fruit.price}}
  • fruitsList's length is bigger than 3

    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)


    onclick=ng-click=(click)
    ng-src=[scr]
    map():遍历流
    filter():过滤流
    do():监视流(通常打个console而已)
    catch():捕获异常
    subscribe():订阅流(即执行)

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

    1,this[监听器的对象]
    2,event.target[当前目标对象]

    1,你按那里都是:


    2,他可能是ul or li

    1,this[监听器的对象]
    2,event.target[当前目标对象]

    1,你按那里都是:


    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



    页面ICON image/x-icon|image/gif


    png
    预加载

    async(两个都是异步,加载)defer加载后,等待执行。async下载完就执行。
    默认为同步加载,后执行.

    2,

    block one

    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,父亲通过邦定传值给子

    子:
    @Input() public cName:string = 'thisIsIgnored';
    OR

    broadcast1: EventEmitter;

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

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

    ngOnInit() {
    this.broadcast.subscribe((color) => this.changeColor(color));
    }
    2,子通过邦定传值

    @Output() colorChanged: EventEmitter;
    this.colorChanged.emit(color);


    http://blog.csdn.net/qq_15096707/article/details/52859110

    手机扫一扫

    移动阅读更方便

    阿里云服务器
    腾讯云服务器
    七牛云服务器

    你可能感兴趣的文章