标签: observable

在我的Angular 2组件中,我有一个Observable数组

list$: Observable<any[]>;

在我的模板中我有

<div *ngIf="list$.length==0">No records found.</div>

<div *ngIf="list$.length>0">
    <ul>
        <li *ngFor="let item of list$ | async">item.name</li>
    </ul>
</div>

但是对于Observable数组,列表$ .length不起作用.

更新:

似乎(列出$ | async)?. length给出了我们的长度但是下面的代码仍然不起作用:

<div>
    Length: {{(list$ | async)?.length}}
    <div *ngIf="(list$ | async)?.length>0">
        <ul>
            <li *ngFor="let item of (list$ | async)">
                {{item.firstName}}
            </li>
        </ul>
    </div>
</div>

任何人都可以指导我如何检查Observable数组的长度.

在获得新值之前,是否可以在knockout中获取可观察的可观察量的当前值？

例:

this.myObservable = ko.observable();
this.myObservable.subscribe(function(newValue){
    //I'd like to get the previous value of 'myObservable' here before it's set to newValue
});

我试图了解如何在Angular 2中使用Observables.我有这个服务:

import {Injectable, EventEmitter, ViewChild} from '@angular/core';
import {Observable} from "rxjs/Observable";
import {Subject} from "rxjs/Subject";
import {BehaviorSubject} from "rxjs/Rx";
import {Availabilities} from './availabilities-interface'

@Injectable()
export class AppointmentChoiceStore {
    public _appointmentChoices: BehaviorSubject<Availabilities> = new BehaviorSubject<Availabilities>({"availabilities": [''], "length": 0})

    constructor() {}

    getAppointments() {
        return this.asObservable(this._appointmentChoices)
    }
    asObservable(subject: Subject<any>) {
        return new Observable(fn => subject.subscribe(fn));
    }
}

此BehaviorSubject从另一个服务推送新值:

that._appointmentChoiceStore._appointmentChoices.next(parseObject)

我在组件中以可观察的形式订阅它,我希望将其显示在:

import {Component, OnInit, AfterViewInit} from '@angular/core'
import {AppointmentChoiceStore} from '../shared/appointment-choice-service'
import {Observable} from 'rxjs/Observable'
import {Subject} from 'rxjs/Subject'
import {BehaviorSubject} from "rxjs/Rx"; …

在Angular 1.x中,我有时需要提出多个http请求,并对所有响应做一些事情.我会把所有的promises抛出一个数组并调用Promise.all(promises).then(function (results) {...}).

Angular 2最佳实践似乎指向使用RxJS Observable作为http请求中的承诺的替代.如果我有两个或更多从http请求创建的不同Observable,它们是否相当于Promise.all()？

在Angular 1.x中,UI-Router是我的主要工具.通过返回"解析"值的承诺,路由器将在呈现指令之前等待承诺完成.

或者,在Angular 1.x中,null对象不会使模板崩溃 - 所以如果我不介意暂时不完整的渲染,我可以$digest在promise.then()填充最初为空的模型对象后使用它进行渲染.

在这两种方法中,如果可能的话,我宁愿等待加载视图,如果无法加载资源,则取消路由导航.这为我节省了"取消导航"的工作.编辑:注意这具体意味着这个问题要求Angular 2期货兼容或最佳实践方法来执行此操作,并要求尽可能避免使用"Elvis操作符"!因此,我没有选择那个答案.

但是,这两种方法都不适用于Angular 2.0.当然,有一个标准的解决方案计划或可用于此.有谁知道它是什么？

@Component() {
    template: '{{cats.captchans.funniest}}'
}
export class CatsComponent {

    public cats: CatsModel;

    ngOnInit () {
        this._http.get('/api/v1/cats').subscribe(response => cats = response.json());
    }
}

以下问题可能反映了相同的问题:加载数据PROMISE后的Angular 2渲染模板.请注意,问题中没有代码或接受的答案.

在角度应用程序中,我们有ngOnDestroy()一个组件/指令的生命周期钩子,我们使用这个钩子取消订阅observables.

我想清除/ @injectable()服务中创建的destory observable .我看到一些帖子说ngOnDestroy()可以在服务中使用.

但是,这是一个很好的做法,只有这样才能这样做,什么时候会被召唤？有人请澄清一下.

题

出于测试目的,我正在创建Observable替换实际http调用返回的observable的对象Http.

我的observable是使用以下代码创建的:

fakeObservable = Observable.create(obs => {
  obs.next([1, 2, 3]);
  obs.complete();
});

问题是,这个可观察到的立即发出.有没有办法为其排放添加自定义延迟？

跟踪

我试过这个:

fakeObservable = Observable.create(obs => {
  setTimeout(() => {
    obs.next([1, 2, 3]);
    obs.complete();
  }, 100);
});

但它似乎没有用.

在使用rxjs的Angular 2中,我试图将Promise转换为Observable.由于许多在线指南的显示我用fromPromise的Observable.哪个抛出错误:

Property 'fromPromise' does not exist on type 'typeof Observable'.

Observable导入如下:

import { Observable } from "rxjs/Observable";

尝试fromPromise像其他运算符一样导入会导致错误:

import 'rxjs/add/operator/fromPromise';

即使我压制打字稿错误,它仍然会导致错误:

(<any>Observable).fromPromise

错误:

Uncaught (in promise): TypeError: __WEBPACK_IMPORTED_MODULE_3_rxjs_Observable__.Observable.fromPromise is not a function

rxjs repo 在这里报告了一些类似的问题,但也没有解决方案.

我尝试链接多个rx.js可观察量并传递数据.Flatmap应该是拟合运算符但是导入

import { Observable } from 'rxjs/Observable';

找不到:

Error TS2339: Property 'flatmap' does not exist on type 'Observable<Coordinates>'

5.0.0-beta.6使用rx.js的版本.

public getCurrentLocationAddress():Observable<String> {
    return Observable.fromPromise(Geolocation.getCurrentPosition())
      .map(location => location.coords)
      .flatmap(coordinates => {
        console.log(coordinates);
        return this.http.request(this.geoCodingServer + "/json?latlng=" + coordinates.latitude + "," + coordinates.longitude)
          .map((res: Response) => {
                       let data = res.json();
                       return data.results[0].formatted_address;
              });
      });
  }

我正在阅读有关路由和导航的角度指南.

他们使用此代码检索路由器的参数'id'并使用它来获取service服务的英雄:

ngOnInit() {
  this.route.params
    .switchMap((params: Params) => this.service.getHero(+params['id']))
    .subscribe((hero: Hero) => this.hero = hero);
}

但我不太清楚switchMap在上面的代码中使用运算符的目的是什么.

以下代码不一样？

ngOnInit() {
  this.route.params
    // NOTE: I do not use switchMap here, but subscribe directly
    .subscribe((params: Params) => {
      this.service.getHero(+params['id']).then(hero => this.hero = hero)
    });
}