Компонент не может прочитать сервис (VScode с линтером ничего не замечает)

Question

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

ОШИБКА TypeError: Невозможно прочитать свойство 'getItalyWeatherData' из неопределенного

Это мой сервис:

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

@Injectable({
  providedIn: 'root',
})
export class WeatherForecastApiService {
    constructor(private http: HttpClient) { }

    public getItalyWeatherData(cityName: string) {
        const s = 'https://api.openweathermap.org/data/2.5/weather?q=' + cityName + ',it&appid=d5754a8efdf1ead276cffa4f8250f1e1';

        return this.http.get(s);
    }
}

А это мой компонент:

.ts Файл

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { WeatherForecastApiService } from './weatherForecastApiService/weather-forecast-api.service';

@Component({
    selector: 'app-weather-forecast',
    templateUrl: './weather-forecast.component.html',
    styleUrls: ['./weather-forecast.component.scss'],
})

export class WeatherForecastComponent  {
    public weatherData: WeatherForecastApiService;
    public weatherFeature = new BehaviorSubject<WeatherFeature>(undefined);

    constructor() {
        this.weatherData.getItalyWeatherData('Pisa').subscribe((response) => {
            const ks: string[] = ['name', 'main', 'temp', 'pressure', 'weather'];
            this.weatherFeature.next({
                cityName: response[ks[0]],
                degrees: Number((response[ks[1]][ks[2]] - 273.15).toFixed()),
                pressure: Number(response[ks[1]][ks[3]]),
                sky: response[ks[4]][0][ks[1]],
            });
            console.log(this.weatherFeature);
        });
    }
}

.html Файл:

<div class="weatherForecastSpace"></div>

Надеюсь, в этом нет ничего серьезного, и это может быть моим первоначальным недостатком.

Answer 1

Служба должна быть внедрена в компонент, не определенный как атрибут класса.

constructor(public weatherData: WeatherForecastApiService) {
       // you code
}

Прочитайте здесь: https://angular.io/guide/dependency-injection