标签: angular2-observables

这个问题已在这里提出.但是,由于提问者的申请背景涉及太多问题,我无法理解基础知识.例如,有一个queryArr参数.它有什么作用？

无论如何,我需要一些关于如何以最简单的方式进行同步http调用的指导.我想出的解决方案是必须以"嵌套"顺序订阅observable.例如,有可观察的ox和oy.被调用的请求oy数据取决于数据来自ox:

xData: string = "";
yData: string = "";  

ox.subscribe(
    data => {xData = data;},
    error => console.log(error),
    () => {
        oy.subscribe(
            data => {yData = xData*data;},
            error => console.log(error),
            () => console.log("aaa")
        );
    }
);

上次我记得(我不做javascript,并且是一个小新手),在我订阅的范围内oy,xData或者yData不能再看到了.如果我错了,请纠正我并指出正确的方向.

有没有"精细"的解决方案或更好的方法来做这种事情？

我最近开始研究Reactive Extensions,主要是在客户端使用Angular 2进行观察.可观察的Rx和async的概念 - 等待dotnet似乎非常相似.是否有任何具体的例子,其中一个适用,另一个不适用.如果没有,微软推出Rx.Net是否还有其他原因,因为可观察量是Reactive Extensions的核心.任何链接或实时示例都足够了.我正在寻找差异线程/性能明智.

我正在尝试使用RxJS学习反应式编程.我试图使用Observable.from()方法从数组创建一个observable ,但我得到一个错误 - ' 属性'来自'不存在类型'类型的Observable'.

我使用Angular CLI构建了一个Angular应用程序,因此正确导入了包括RxJS包在内的所有依赖项.

在app.component.ts中我添加了以下import语句:

import { Observable} from 'rxjs/Observable'
import 'rxjs/observable/from'

我的AppComponent类看起来像这样:

export class AppComponent {

  numbers: number[] = [1, 2, 3, 4, 5];

  callMyObservable() : void {  
    Observable.from(this.numbers);
  }
}  

但我得到上面提到的编译时错误.

我不确定如何使它工作......需要帮助!

谢谢,迪帕克

我有一个应用程序，它显示带有个人资料图片的用户列表。当我更新此用户的值时，图像会重新加载，因为可观察列表再次发出所有数据。我怎样才能避免这种情况？

<div *ngFor="let user of users">
<img [src]="user.profilepic"/> {{user.name}} <button (click)="updateUser(user)">Update</button>
</div>

TS :

this.userProvider.getUserList()
      .distinct()
      .subscribe(data => {
        this.users = data
      })

我希望这个 distinct() 函数可以完成这项工作，但没有成功。该应用程序是用 ionic 3 结合 firebase 实时数据库数据和使用公共 url 下载的 firebase 存储图片制作的

编辑

3 年后，我在另一个应用程序中遇到了同样的问题......每次从我的 Observable 进入时，图像都会闪烁（所以我认为它会刷新？）

如何通过超时运算符检测错误？我想在服务器没有响应时显示警报或类似的东西。

我的拦截器中有一个类似的代码：

this.http.post('http://localhost:3000/api/core', data)
        .pipe(
            timeout(30000),
            map((response: any) => { // Success...
              return response;
            }),
            catchError((error) => { // Error...
              // Timeout over also handled here
              // I want to return an error for timeout
              return throwError(error || 'Timeout Exception');
            }),
            finalize(() => {
              console.log('Request it is over');
            })
        );

["rxjs": "^6.0.0", "@angular/http": "^6.0.3",]

我的用例是:

1. 用户从我们的API请求资产因JWT过期而失败(作为httpOnly cookie传递) - API返回401状态代码.
2. 我们再次使用refresh_token来验证它们(无需用户做任何事情),以便从我们的客户端请求auth0来检索新的JWT.
3. 我们将新的JWT发送到我们的API,将其设置为httpOnly cookie以替换过期的cookie.
4. 然后,我们想要重试用户在步骤1中对API所做的原始请求.

我正在尝试使用redux-observable在我的Redux应用程序中使用Observable .如果你能想到让上述用户流程工作的另一种方式,我很乐意听到.

NB.我正在使用rxjs V5

export const fetchAssetListEpic = (action$, store) => {
  return action$.ofType('FETCH_ASSET_LIST')
  .switchMap( action => {
    const options = {
      crossDomain: true,
      withCredentials: true,
      url: uriGenerator('assetList', action.payload)
    };
    return ajax(options);
  })
  .map(fetchAssetListSuccess)
  .retryWhen(handleError)
  .catch(redirectToSignIn);
};

function handleError(err) {
  return (err.status === 401) ? 
  /* Authenticate here [Step 2] */
  /* Send new JWT to API [Step 3] */
  /* If successful make original request again [Step …

根据我对Angular和RxJ的理解,有两种方法可以终止Observable.你可以unsubscribe()从他们或使用takeUntil()和complete().以下是每种方法的示例(伪代码).

取消订阅()方法

private _id: number;
private _subscriptions: Subscription[] = [];

constructor(private _route: ActivatedRoute) {
    this._getId();
}

public ngOnDestroy(): void {
    this._subscriptions.forEach(
        subscription => subscription.unsubscribe()
    );
}

private _getId(): void {
    this._subscriptions.push(
        this._route.params.subscribe(params => this._id = +params['id'])
    );
}

takeUntil()和complete()方法

private _id: number;
private _ngUnsubscribe: Subject<void> = new Subject<void>();

constructor(private _route: ActivatedRoute) {
    this._getId();
}

public ngOnDestroy(): void {
    this._ngUnsubscribe.next();
    this._ngUnsubscribe.complete();
}

private _getId(): void {
    this._route.params.takeUntil(this._ngUnsubscribe).subscribe(
        params => this._id = +params['id']
    );
}

在Angular中,是否有一种终止Observables的首选方法？

使用Angular 4.3.1和HttpClient,我需要通过异步服务将请求和响应修改为httpClient的HttpInterceptor,

修改请求的示例:

export class UseAsyncServiceInterceptor implements HttpInterceptor {

  constructor( private asyncService: AsyncService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // input request of applyLogic, output is async elaboration on request
    this.asyncService.applyLogic(req).subscribe((modifiedReq) => {
        const newReq = req.clone(modifiedReq);
        return next.handle(newReq);
    });
    /* HERE, I have to return the Observable with next.handle but obviously 
    ** I have a problem because I have to return 
    ** newReq and here is not available. */
  }
}

响应的问题不同,但我需要再次使用apply来更新响应.在这种情况下,角度指南建议如下:

return next.handle(req).do(event => {
    if …

以下两个可观察映射之间有什么区别？

(如果以下代码中的某些内容对您来说很奇怪:它源于一个边做边学的爱好项目;我仍然学习RxJS)

我有一个带有getter和构造函数的组件.两者都从应用程序的ngrx存储中读取信息并提取字符串(name).

getter和构造函数之间的唯一区别: getter在HTML中使用,它返回的observable通过async管道发送,而构造函数中的observable映射由订阅使用完成subscribe.我希望它们都能像新的值一样频繁发射name.

但是相反,只有getter以这种方式工作,并async在HTML中提供管道,在其中使用新的name值(console.log('A')每个名称更改都会调用).该subscribe认购的回调只被调用一次console.log('B'),并console.log('B!')都调用一次,并永远不再.

如何解释这种行为差异？

我的组件的片段:

// getter works exactly as expected:
get name$(): Observable<string> {
  console.log('getter called')
  return this.store
    .select(this.tableName, 'columns')
    .do(_ => console.log('DO (A)', _))
    .filter(_ => !!_)
    .map(_ => _.find(_ => _.name === this.initialName))
    .filter(_ => !!_)
    .map(_ => {
      console.log('A', _.name)
      return _.name
    })
}

// code in constructor seems to lose the subscription after the …

我正在开发一个有角度的项目，我遇到了使用可观察对象调用后端来获取产品的情况。

代码如下所示。

getProducts () : Product[] {
this.http.get<[]>(this.m_baseURL+'/products').subscribe(res => {
  console.log(res)
  this.products = res;
});
  return this.products
}

问题是，return 语句不会等待上述语句执行。在我的组件中，我得到一个空数组。我在服务和组件中使用控制台日志进行了检查。事实证明，return 语句是在 observable 完成赋值之前执行的。

我如何让它停止直到完成其工作，就像 async wait 一样。我应该使用普通的异步等待而不是可观察的吗？

这是我的第一个 Angular 项目，所以如果问题是新手，请原谅我。