Тип 'Наблюдаемый <{} | IProduct []> 'нельзя назначить типу' Observable <IProduct []> ' - PullRequest
Новая
       24

Тип 'Наблюдаемый <{} | IProduct []> 'нельзя назначить типу' Observable <IProduct []> '

0 голосов
/ 03 сентября 2018

В настоящее время проходит курс Дебора Курата на Angular 6

Я сделал с модулем Observables, но столкнулся с ошибкой в ​​моем products.service.

enter image description here

Я нашел этот ответ здесь , но я уже сделал это и не верю, что это было на самом деле для проблемы, возникшей здесь.

Я также нашел эту проблему здесь, но исправление не сработало: https://github.com/angular/angular/issues/20349

Исправление предполагалось просто return Rx.Observable.of, но of на Observable.

нет. 
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, tap } from 'rxjs/operators';
import { Observable } from 'rxjs';

// Interfaces
import { IProduct } from './product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private productUrl = 'api/products/products.json';

  constructor(private http: HttpClient) {}

  getProducts(): Observable<IProduct[]> {
    return this.http.get<IProduct[]>(this.productUrl).pipe(
      tap(data => console.log('All: ' + JSON.stringify(data)))
    );
  }
}

Я обнаружил, что если я просто изменю тип Observable, возвращенный к проходам кода, но я чувствую, что это обман, и я теряю преимущество Typescript: 

getProducts(): Observable<any> {
  return this.http.get<IProduct[]>(this.productUrl).pipe(
    tap(data => console.log('All: ' + JSON.stringify(data))),
    catchError(this.handleError)
  );
}

1 Ответ

0 голосов
/ 04 сентября 2018

Вы можете просто навести курсор на .pipe, чтобы проверить его возвращаемое значение.

.tap просто возвращает то, что получает. Но я думаю, catchError может вернуть Object. Вот почему этот тип возврата принимается за Observable<{}|IProduct[]>.

Fix 1. Используйте это в этом случае. 

getProducts(): Observable<{}|IProduct[]> {
  return this.http.get<IProduct[]>(this.productUrl).pipe(
    tap(data => console.log('All: ' + JSON.stringify(data))),
    catchError(this.handleError)
  );
}

В получающем компоненте вы можете сделать это: 

products => { this.products = products as IProduct[] };

Исправление 2. Если вы не хотите изменять тип возвращаемого значения, а затем исправлять код, в котором вы подписались на это наблюдаемое, просто избавьтесь от catchError здесь: 

getProducts(): Observable <IProduct[] > {
  return this.http.get < IProduct[] > (this.productUrl).pipe(
    tap(data => console.log('All: ' + JSON.stringify(data)))
  );
}

Fix 3. Или просто избавиться от .pipe в первую очередь. Вы используете .tap для входа в любом случае. Так что это не добавляет никакой ценности вашему коду. Что касается отлова ошибки, вы можете сделать это либо в HttpInterceptor, либо в том месте, где вы будете subscribing к тому, что возвращает этот метод. 

getProducts(): Observable<IProduct[]> {
  return this.http.get<IProduct[]>(this.productUrl);
}
...