Angular 8: this.http.get не является функцией - PullRequest
Новая
       5

Angular 8: this.http.get не является функцией

1 голос
/ 20 января 2020

Я прочитал несколько вопросов, касающихся одной и той же проблемы, но не нашел ответа. Я пытаюсь использовать веб-сервис для отображения данных в компоненте angular. Для этого я создал модель, сервис и компонент. Я использовал для создания такого запроса со старым HttpClient.

Вот моя модель, определяющая поля. 

export class CryptoCurrency {
  constructor(private _id: number,
              private _currencyKeyId: string,
              private _currencyname: string,
              private _symbol: string,
              private _isPublic: boolean) {
  }

Я создал файл basi c json с некоторыми данными для извлечения (json -сервер) Сервисный уровень : 

import { Injectable } from '@angular/core';
import {CryptoCurrency} from '../../model/crypto-currency/CryptoCurrency.model';
import { HttpClientModule} from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class CryptoCurrencyService {
  baseUrlBackend = 'http://localhost:3000/currencies';

  constructor(private http: HttpClientModule) { }

  getAll() {
    return this.http.get<Array<CryptoCurrency>>(this.baseUrlBackend);
  }
}

В моем компоненте: 

import { Component, OnInit } from '@angular/core';
import {CryptoCurrency} from '../../shared/model/crypto-currency/CryptoCurrency.model';
import {CryptoCurrencyService} from '../../shared/services/crypto/CryptoCurrency.service';

@Component({
  selector: 'app-currencies',
  templateUrl: './currencies.component.html',
  styleUrls: ['./currencies.component.css'],
  providers: [ CryptoCurrencyService ]
})
export class CurrenciesComponent implements OnInit {
  currency: CryptoCurrency;
  currencies: Array <CryptoCurrency> = [];

  // dependency injection
  constructor(private cryptoCurrencyService: CryptoCurrencyService ) { }

  ngOnInit() {
    this.cryptoCurrencyService.getAll().subscribe(res => {
      this.currencies = res;
    });
  }
}

Я объявил HttpClientModule в app.component.ts 

import { HttpClientModule } from '@angular/common/http';

И в импорте: 

  imports: [
    NgbModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule
  ],

Наконец, в файле html: 

  <ul>
    <li *ngFor="let currency of currencies">
      {{ currency.id }} {{ currency.currencyKeyId}} {{ currency.symbol}} {{ currency.currencyname}}
    </li>
  </ul>

Ответы [ 2 ]

2 голосов
/ 20 января 2020

Вам просто нужно заменить HttpClientModule в вашем сервисе на 

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

и в конструкторе: 

private http: HttpClient

Если вы заметили в документах , вы только инициализируйте HttpClientModule в компоненте приложения.

1 голос
/ 20 января 2020

Вы не должны зависеть от HttpClientModule в вашем сервисе , оно должно быть только в вашем модуле при импорте. Вместо этого CryptoCurrencyService зависит от HttpClient. 

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

constructor(private http: HttpClient) { }
...