标签: angular-observable

有人可以解释Angular Promise和之间的区别Observable吗？

每个例子都有助于理解这两种情况.在什么情况下我们可以使用每个案例？

 import { Observable, of } from "rxjs";

// And if I try to return like this
  return Observable.of(this.purposes);

我收到一个错误说明,'''类型'不存在'Observable'属性'

我想利用在angular2观测和糊涂了,为什么我应该使用map()过subscribe().假设我从webApi获取值,就像这样

  this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')

现在使用subscribe(success, error, complete)我可以获得成功回调的所有值,我可以返回完整回调的值.如果我可以做所有这些功能,那么需要map()什么？它有什么优势吗？

简而言之,为什么人们应该这样写:

this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')
    .map(r=>{})
    .subscribe(value => {
    }, error => error, () => {
});

当他们可以简单地写这个没有map函数:

this.http.get('http://172.17.40.41:8089/api/Master/GetAllCountry')
    .subscribe(value => {        
    }, error => error, () => {           
});

我正在将Angular 5应用程序迁移到最新的CLI和Angular 6 RC,并且我的所有Observable导入都被破坏了.我看到Angular 6改变了导入的工作方式,但我找不到任何关于语法如何工作的明确参考.

我在5中有这个,它运行良好:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

现在使用新语法,我看到了

import { Observable, Subject, throwError} from 'rxjs';
import { map } from 'rxjs/operators';

前两行编译,但我无法弄清楚如何获取catch和throw例如..map()在代码中使用时也会抛出构建错误.

有人提到这应该如何工作？

我看到很多教程做了这样的事情:

http.get("...").subscribe(
  success => console.log('hello success'),
  error => console.log('bye error')
);

我不知道它是如何工作的,因为没有任何类型或任何东西,但是我试图自己这样做,我最终得到请求总是成功,即使我有一个错误.问题是什么？

麻烦制造者:

this.memberService.create(this.currentMember)
      .subscribe(
        success => {
          let mem: Member = success.json() as Member;
          if (this.selectedOrganization) {
            this.addMemberToOrganization(mem);
          } else if (this.selectedServiceProvider) {
            this.addMemberToServiceProvider(mem);
          } else {
            this.toastsService.error("lbl_users_service_provider_and_organization_undefined");
          }
        },
        error => console.log(error)
      );

memberService中的Create-Method:

  create(member: Member): Observable<any> {
    return this.http
      .post(this.RESOURCE_BASE_URL, member)
      .map(response => {
        if (response.status === 200) this.toastsSerivce.success(this.translateService.instant('lbl_users_member_created'));
        return response;
      })
      .catch(error => this.toastsSerivce.error(this.translateService.instant('lbl_users_member_create_failed')));
  }

我甚至发现错误,但这subscribe部分似乎并不在意.它失败了success.json(),因为如果有错误,则没有json.但如果出现错误,我希望它可以调用error =>... …

我已经使用自定义指令来检测角度2中元素外部的单击,但角度4中不可能相同.

[plunkr] https://plnkr.co/edit/aKcZVQ?p=info

当我尝试在angular-4中使用相同的代码时,我收到以下错误:

1. Argument of type '{ template: string; directives: typeof ClickOutside[]; }' is not assignable to parameter of type 'Component'. ==> 

    @Component({
    templateUrl: "",
    directives: [ClickOutside]
    })


2. Type 'Subscription' is not assignable to type 'Observable<MouseEvent>'. in the directive inside ngOnInit() and ngOnDestroy() 

ngOnInit() {
    this.globalClick = Observable
        .fromEvent(document, 'click')
        .delay(1)
        .do(() => {
            this.listening = true;
         }).subscribe((event:MouseEvent) => {
            this.onGlobalClick(event);
         });
}

ngOnDestroy() {
    this.globalClick.unsubscribe();
}

如果角度4中的指令声明有任何变化请告诉我,官方文档对此事没有任何帮助.

我的组件模板中有以下内容:

<div *ngIf="user$ | async as user>...</div>

在上面div我想使用异步管道只订阅一次另一个observable,并user在整个模板中像上面一样使用它.例如,这样的事情是可能的:

<ng-template *ngIf="language$ | async as language>
<div *ngIf=" user$ | async as user>
  <p>All template code that would use both {{user}} and {{language}} would go in between</p>
  </div>
</ng-template>

或者甚至可以在一个声明中合并？

我正在将我的应用程序升级到Angular 6.我正在从Angular 4升级,但下面的代码在Angular 6中导致错误,它在Angular 4中运行良好.

我得到的错误:

类型'typeof Observable'上不存在属性'of'

错误:类型'Observable'上不存在属性'catch'

我该如何解决这些错误？

  private authInterceptor(observable: Observable<Response>): Observable<Response> {
    return observable.catch((error, source) => {
      if (error.status == 401) {
        this.router.navigateByUrl('/login');
        return Observable.of();
      } else {
        return Observable.throw(error);
      }
    });
  }

我试图从服务订阅一个observable,它构建没有错误,但我在浏览器中查看时得到错误"this.service.getBanners(...).subscribe不是一个函数".

服务:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()

export class BannerService {

    banners: any = ['1','2','3'];

    constructor(
    ) {}

    getBanners(): Observable<any[]> {
        return this.banners;
    }

    setBanners(banners: any[]): void {
        this.banners = banners;
    }

}

零件:

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { BannerService } from './../banner/banner.service';

@Component({
    selector: '.banner',
    templateUrl: './banner.component.html',
    styleUrls: ['./banner.component.sass'],
    encapsulation: ViewEncapsulation.None
})

export class BannerComponent implements OnInit {

    banners: any[]; …

根据https://angular.io/tutorial/toh-pt6

通常,observable可以随时间返回多个值.来自HttpClient的observable总是发出一个值,然后完成,永远不会再次发出.

确实如此,一旦请求完成,Http请求/响应就不能再生成任何值.那么HTTPClient在发出请求时返回Observable的主要原因是什么？这只是因为我们可以在Observable上应用大量的运算符(重试,去抖等)吗？或者我有什么其他特殊原因吗？