Angular 2+/Auth0, использующий AuthHttp с сервисом и наблюдаемый

Question

Попытка преобразовать мои вызовы Http в вызовы AuthHttp, и я получаю ошибки компиляции, перечисленные ниже при использовании AuthHttp. Я сделал 2 попытки для решения этой проблемы, и обе выдали разные ошибки. Я хотел бы сохранить структуру подписки, исходящей от компонента, и сделать так, чтобы сервис возвращал наблюдаемую информацию.

Компонент, который подписывается, одинаков для обоих трейлов.

import { Component, OnInit } from '@angular/core';

import { Hero } from '../hero';

import { HeroService } from '../hero.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent implements OnInit {
  heroes: Hero[] = [];

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
  }
}

Служба, с отсутствием несвязанного кода (другие функции, имеющие ту же проблему, но я полагаю, что если я смогу получить помощь по одной, я могу выяснить другие функции CRUD), я разместил их обе без комментариев, но когда я компилирую, я комментирую одну.

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { MessageService } from './message.service';
// import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthHttp } from 'angular2-jwt';
import { catchError, map, tap } from 'rxjs/operators';

@Injectable()
export class HeroService {

  ...

  /** GET heroes from the server */
  getHeroes(): Observable<Hero[]> {
    // Trial 1
    return this.authHttp.get<Hero[]>(this.heroesUrl).pipe(
      tap(heroes => this.log(`fetched heroes, ${this.heroesUrl}`)),
      catchError(this.handleError('getHeroes', []))
    );

    // Trial 2
    return this.authHttp
      .get(this.heroesUrl)
      .map((res: Response) => <Hero[]>res.json());
  }

  ...

  constructor(
    // private http: HttpClient,
    private authHttp: AuthHttp,
    private messageService: MessageService) { }
}

Полученные ошибки

// Trial 1
ERROR in src/app/hero.service.ts(36,12): error TS2558: Expected 0 type arguments, but got 1.

// Trial 2
  Property 'includes' is missing in type 'Promise<any>'.
ERROR in src/app/hero.service.ts(44,12): error TS2345: Argument of type '(res: Response) => Hero[]' is not assignable to parameter of type '(value: Response, index: number) => Hero[]'.
  Types of parameters 'res' and 'value' are incompatible.
    Type 'Response' is not assignable to type 'Response'. Two different types with this name exist, but they are unrelated.
src/app/hero.service.ts(44,31): error TS2352: Type 'Promise<any>' cannot be converted to type 'Hero[]'.
src/app/hero.service.ts(44,31): error TS2352: Type 'Promise<any>' cannot be converted to type 'Hero[]'.
  Property 'includes' is missing in type 'Promise<any>'.

Я не уверен, что я делаю неправильно, любая помощь приветствуется.

Еще один вопрос, который связан с этим, если мне нужно передать параметры http с AuthHttp? вот пример из сервиса

  const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  /** PUT: update the hero on the server */
  updateHero (hero: Hero): Observable<any> {
    const url = `${this.heroesUrl}/${hero.id}`;
    return this.http.put(url, hero, httpOptions).pipe(
      tap(_ => this.log(`updated hero id=${hero.id}, ${url}`)),
      catchError(this.handleError<any>('updateHero'))
    );
  }

Я использую http здесь, но поменяю его местами с помощью authHttp, и я не уверен, что мне нужно больше httpOptions?

Заранее спасибо.

Answer 1

Я полагаю, вам не хватает функции карты. Вы хотите что-то вроде этого:

getTenantId (): Observable<string> {
 return this.authHttp.get(this.apiUrl).map(res => res.json());
}

Подробнее можно узнать здесь...

https://auth0.com/blog/introducing-angular2-jwt-a-library-for-angular2-authentication/