Currently, I am working on a weather application using Angular based on the concepts from the book Angular for Enterprise-Ready Web Applications - Second Edition. I am in the process of adding a search component to the app, which will allow users to display weather information based on the city they search for. However, I am encountering the error mentioned above in the 'city-search' component.ts file. The complete error message is as follows:
No overload matches this call. Overload 1 of 2, '(observerOrNext?: Partial<Observer<string | null>> | ((value: string | null) => void) | undefined): Subscription', gave the following error. Argument of type '(searchValue: string) => void' is not assignable to parameter of type 'Partial<Observer<string | null>> | ((value: string | null) => void) | undefined'. Type '(searchValue: string) => void' is not assignable to type '(value: string | null) => void'. Types of parameters 'searchValue' and 'value' are incompatible. Type 'string | null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'. Overload 2 of 2, '(next?: ((value: string | null) => void) | null | undefined, error?: ((error: any) => void) | null | undefined, complete?: (() => void) | null | undefined): Subscription', gave the following error.
city-search.component.ts:
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';
import { WeatherService } from '../weather/weather.service';
@Component({
selector: 'app-city-search',
templateUrl: './city-search.component.html',
styleUrls: ['./city-search.component.css']
})
export class CitySearchComponent implements OnInit {
@Output() searchEvent = new EventEmitter<string>()
search = new FormControl('', [Validators.minLength(2)])
constructor(private weatherService: WeatherService){}
ngOnInit(): void {
this.search.valueChanges.pipe(debounceTime(1000)).subscribe((searchValue: string) => {
if (!this.search.invalid) {
this.searchEvent.emit(searchValue)
const userInput = searchValue.split(',').map(s => s.trim())
this.weatherService.getCurrentWeather(
userInput[0],
userInput.length > 1 ? userInput[1] : undefined
).subscribe(data => (console.log(data)))
}
})
}
}
I have shared the GitHub link where you can access the project: https://github.com/soorajKADAM/local-weather-app.git
I am currently struggling to comprehend the meaning of the error message and how to resolve it.