CODEWITHSUNDEEP
angularobservablesubscription
Zyorhist
Zyorhist

Reputation: 11

subscription is missing properties from observable<character[]>

i cant fix the error, "Type 'Subscription' is missing the following properties from type 'Observable<Character[]>';...... any help fixing the error would be nice. i also need help converting api returns to useable data.

export class CharacterSearchComponent implements OnInit {

  // sets characters$ as an observable
  character$: Observable<Character[]>;
  private subscriptions: Subscription[] = [];

  // sets private method for searching
  private searchTerms = new Subject<string>();

  constructor(
    // sets private method for using character.service
    private characterService: CharacterService
  ) { }

  // pushes search terms into the observable
  search(term: string): void{
    this.searchTerms.next(term);
  }

  ngOnInit(): void {
    this.character$ = this.searchTerms.pipe(
      // wait after keystroacks to reduce frequent http pull attempts
      debounceTime(300),

      // ignore if same as previous turm
      distinctUntilChanged(),

      // switch to new search if the term changed
      switchMap((term: string) => this.characterService.searchChar(term)),
    ).subscribe(x => console.log(x));
  }

}

edit, added in definition for this.characterService.searchChar(term)),

    searchChar(term: string): Observable<Character[]> {
      if (!term.trim()) {
        // if no match, return nothing
        return of([]);
        //console.log();
      }

     
      return this.http.get<Character[]>(`${this.characterUrl}/?search=${term}`).pipe(tap(x => x.length?
        this.log(`found characters matching "${term}"`) :
        this.log(`Sorry, cant find a character matching "${term}"`)),
        catchError(this.handleError<Character[]>('searchChar', [])));
    }

Upvotes: 0

Views: 1493

Answers (1)

bryan60
bryan60

Reputation: 29355

you've defined character$ as an Observable, but you're assigning a subscription.

this.character$ = this.searchTerms.pipe(
  // wait after keystroacks to reduce frequent http pull attempts
  debounceTime(300),

  // ignore if same as previous turm
  distinctUntilChanged(),

  // switch to new search if the term changed
  switchMap((term: string) => this.characterService.searchChar(term)),
)

this.character$.subscribe(x => console.log(x));

would work. when you call subscribe it returns a Subscription object. You should assign the Observable first if you want to, and then subscribe to it after the fact if needed.

Upvotes: 1

Related Questions