HttpEvent> 'нельзя назначить типу' Observable - PullRequest
Новая
       34

HttpEvent> 'нельзя назначить типу' Observable

0 голосов
/ 03 декабря 2018

Приложение My Angular получает данные о состоянии из REST API и отображает их на веб-странице.У меня есть компонент состояния , который вызывает службу состояний , которая затем вызывает бэкэнд, используя метод httpClient.get().Когда я передаю параметры из компонента в службу, я вижу ошибку HttpEvent<Observable<State[]>>' is not assignable to type 'Observable<State[]> в методе подписки компонента (показан ниже).Когда я запускаю проект, код не компилируется и выдает следующую ошибку.

Ошибка : 

  Date: 2018-12-03T01:18:53.456Z
  ERROR in src/app/state/state.component.ts(28,17): error TS2322: Type 'HttpEvent<Observable<State[]>>' is not assignable to type 'Observable<State[]>'.
    Hash: 1d6c67e65c9ef90f7a15
    Time: 4054ms
    chunk {main} main.js, main.js.map (main) 1.88 kB [initial] [rendered]
    chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 92.4 kB [initial] [rendered]
    chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
      Type 'HttpProgressEvent' is not assignable to type 'Observable<State[]>'.
    chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
    chunk {vendor} vendor.js, vendor.js.map (vendor) 322 kB [initial] [rendered]
        Property '_isScalar' is missing in type 'HttpProgressEvent'.

    ℹ ｢wdm｣: Failed to compile.

Я запускаю проект Angular 7.1.0 в IDE WebStorm.Код загружен в Github репозиторий для справки.

state.component.ts 

import {Component, OnInit} from '@angular/core';
import {Observable} from 'rxjs';
import {State} from './model/state';
import {HttpHeaders} from '@angular/common/http';
import {StateService} from './services/state.service';

@Component( {
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
} )
export class StateComponent implements OnInit
{
  statesObservable: Observable<State[]>;

  constructor(private stateService: StateService) {}

  ngOnInit()
  {
    this.getStates();
  }

  getStates()
  {
    const url='http://localhost:8080/api/v2/state/list';
    const httpOptions={headers: new HttpHeaders( {'Content-Type': 'application/json'} )};
    this.stateService.getStates(url,httpOptions).subscribe(
      data => { this.statesObservable=data; },
      err => console.error( err ),
      () => console.log( 'States retrieved from backend' ) );
    return this.statesObservable;
  }
  statesDataAvailable(): boolean
  {
    return this.statesObservable!==undefined;
  }
}

state.service.ts 

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs';

import {State} from '../model/state';

@Injectable({
  providedIn: 'root'
})
export class StateService
{
  constructor(private httpClient:HttpClient) { }

  getStates(url,httpOptions)
  {
    return this.httpClient.get<State[]>(url,httpOptions);
  }
}

1 Ответ

0 голосов
/ 03 декабря 2018

Я исправил ошибку в классе обслуживания, оператор возврата должен быть this.httpClient.get<State[]>(url,httpOptions); на основе угловых документов.В настоящее время я могу игнорировать ошибку в классе компонентов с помощью оператора ts-ignore, и он работает просто отлично.Обновлены классы:

state.component.ts 

import {Component, OnInit} from '@angular/core';
import {Observable} from 'rxjs';
import {State} from './model/state';
import {HttpEvent, HttpHeaders} from '@angular/common/http';
import {StateService} from './services/state.service';

@Component( {
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
} )
export class StateComponent implements OnInit
{
  statesObservable: Observable<State[]>;

  constructor(private stateService: StateService) {}

  ngOnInit()
  {
    this.getStates();
  }

  getStates()
  {
    const url='http://localhost:8080/api/v2/state/list';
    const httpOptions={headers: new HttpHeaders( {'Content-Type': 'application/json'} )};
    this.stateService.getStates(url,httpOptions).subscribe(
      data => {
        // @ts-ignore
        this.statesObservable=data;
        },
      err => console.error( err ),
      () => console.log( 'States retrieved from backend' ) );
    return this.statesObservable;
  }
  statesDataAvailable(): boolean
  {
    return this.statesObservable!==undefined;
  }
}

state.service.ts 

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';

import {State} from '../model/state';

@Injectable({
  providedIn: 'root'
})
export class StateService
{
  constructor(private httpClient:HttpClient) { }

  getStates(url,httpOptions)
  {
    return this.httpClient.get<State[]>(url,httpOptions);
  }
}
...