代码之家 › 专栏 › 技术社区 › Aris

可观察事物的价值

ngx-admin observable typescript angular

Aris · 技术社区 · 6 年前

我有以下代码:

// Service
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { NbAuthService, NbAuthJWTToken } from '@nebular/auth';

interface PlatformInterface {
  id: number;
  name: string;
}

@Injectable()
export class PlatformService {

  data = [];

  constructor(
    private authService: NbAuthService,
    private http: HttpClient) { }

  getData() {
    console.log(this.authService.getToken()); // This is Observable
    return this.http.get<PlatformInterface[]>(
      'http://app-backend.test/app/platforms',
      {
        headers: new HttpHeaders({
          'Content-Type': 'application/json',
          'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9ldmVyZ2FtZS1iYWNrZW5kLnRlc3RcL2F1dGhcL3NpZ25pbiIsImlhdCI6MTUzODczNDc2MywiZXhwIjoxNTM4ODIxMTYzLCJuYmYiOjE1Mzg3MzQ3NjMsImp0aSI6InR1SnZLQlFHR0RXRmhGcWciLCJzdWIiOjEsInBydiI6Ijg3ZTBhZjFlZjlmZDE1ODEyZmRlYzk3MTUzYTE0ZTBiMDQ3NTQ2YWEifQ.nwf10QpYweuzukerwvzPBqhGMuwGC8o5yCr0zywCa_A'
        })
      }
    );
  }
}

// Component code
this.service.getData().toPromise().then(res => {
  this.source.load(res);
});

我正试着弄到令牌,让它看起来像 "Bearer " + token .

根据 https://akveo.github.io/nebular/docs/auth/nbauthservice#nbauthservice

我尝试了不同的方法,但不能理解可观察的概念。

有人能帮忙吗?

1 回复 | 直到 6 年前

SiddAjmera 6 年前

您希望首先获取AuthToken,然后进行第二次调用。要做到这一点,您可能需要 map 然后返回实际值 Observable 从里面。但既然这能给你一个 Observable<Observable<PlatformInterface[]>> flatMap

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { NbAuthService, NbAuthJWTToken } from '@nebular/auth';
import { flatMap } from 'rxjs/operators';

interface PlatformInterface {
  id: number;
  name: string;
}

@Injectable()
export class PlatformService {

  data = [];

  constructor(
    private authService: NbAuthService,
    private http: HttpClient
  ) {}

  getData() {

    return this.authService.getToken()
      .pipe(flatMap(token => {
        return this.http.get <PlatformInterface[]>(
          'http://app-backend.test/app/platforms', {
            headers: new HttpHeaders({
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${token}`
            })
          });
      }));
  }
}

推荐文章

Anjil Dhamala · 在收到特定http状态时重试http调用

6 年前

simonberry · 取消RXJS FlatMap链上的订阅

6 年前

user9487981 · 可以激活防护装置并使用角度为5的可见光

6 年前

makat · 角度5 HTTP请求间隔使用可观察值,而值可能会更改

6 年前

Gissipi_453 · 在RxJava 2中的可观察对象中发出字符串数组时出现“不兼容类型”错误

6 年前

Jake Shakesworth · 如何将一个可观察对象映射到另一个可观察对象

6 年前

Nomura Nori · 许诺仅当使用了4个以上的承诺时,才获得“Access Control Allow Origin”

6 年前

MindlessRouse · 路由解析程序在没有订阅的情况下不触发可观察

6 年前

DevMike · 在角度服务中,如果在可观测范围内使用贴图功能,那么假设贴图功能保证同步是否正确?

6 年前

Arun Prasad E S · 角度5,离子3-【ts】类型“void”不可分配给类型“Observable<Post[]>”

6 年前