انگولار - درک نکردن خطای 'هیچ بارگذاریای با این فراخوانی مطابقت ندارد'

من در حال ساخت یک اپلیکیشن هواشناسی هستم و کتاب Angular for Enterprise-Ready Web Applications - نسخه دوم را دنبال میکنم و در حال پیادهسازی کامپوننت جستجو برای اپلیکیشن هستم تا هواشناسی را بر اساس شهر جستجو شده نمایش دهد. اما، خطای مذکور را در فایل city-search.component.ts دریافت میکنم. خطای کامل به این صورت است:

هیچ بارگذاری بیش از حد با این فراخوانی مطابقت ندارد. بارگذاری بیش از حد ۱ از ۲، ‘(observerOrNext?: Partial> | ((value: string | null) => void) | undefined): Subscription’، خطای زیر را داد. آرگومان از نوع ‘(searchValue: string) => void’ قابل انتساب به پارامتری از نوع ‘Partial> | ((value: string | null) => void) | undefined’ نیست. نوع ‘(searchValue: string) => void’ قابل انتساب به نوع ‘(value: string | null) => void’ نیست. نوعهای پارامترهای 'searchValue' و 'value' ناسازگار هستند. نوع 'string | null' قابل انتساب به نوع 'string' نیست. نوع 'null' قابل انتساب به نوع 'string' نیست. بارگذاری بیش از حد 2 از 2، '(next?: ((value: string | null) => void) | null | undefined, error?: ((error: any) => void) | null | undefined, complete?: (() => void) | null | undefined): Subscription'، خطای زیر را ایجاد کرد.

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)))
    }
  })
}
}

من لینک گیت را ارائه میدهم، شما میتوانید پروژه را در آنجا پیدا کنید: https://github.com/soorajKADAM/local-weather-app.git

من متوجه نشدم که خطا به چه معناست،

پاسخ شماره ۱

این خطا به شما میگوید که نوع دادهها مطابقت ندارد. هنگام بررسی دقیق خطا، میتوانید ببینید که Observable با نام valueChanges برای ارسال مقادیری با شکل string | null تعریف شده است. این به این دلیل است که به طور پیشفرض، یک کنترل فرم واکنشی میتواند مقدار null داشته باشد، به اسناد مراجعه کنید. با این حال، در کد شما فقط انتظار دارید searchValue از نوع string باشد و احتمال null بودن آن را مدیریت نمیکنید.

دو احتمال برای رفع آن وجود دارد:

اضافه کردن null به تعریف نوع

راه حل اول این است که نوع searchValue را گسترش دهیم تا اجازه null را نیز بدهد. برای مدیریت صحیح حالت null، یک بررسی به دستور if موجود اضافه کردم. کد بهروزشده:

this.search.valueChanges
  .pipe(debounceTime(1000))
  .subscribe((searchValue: string | null) => {
    if (searchValue !== null && !this.search.invalid) {
      // further code...
    }
  });

کنترل فرم را به عنوان غیرقابل تهی تعریف کنید

در صورتی که کنترل فرم شما نباید قابل تهی باشد، میتوانید آن را به این صورت تعریف کنید:

search = new FormControl('', {
  nonNullable: true,
  validators: [Validators.minLength(2)]
});