错误类型错误：您在预期流的位置提供了“未定义”。您可以提供 Observable、Promise、Array 或 Iterable答案

【问题标题】：ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable错误类型错误：您在预期流的位置提供了“未定义”。您可以提供 Observable、Promise、Array 或 Iterable
【发布时间】：2018-03-26 18:22:42
【问题描述】：

我正在使用 angular 4 进行自动完成搜索。此搜索栏将从 Google Books API 获取图书信息。当我输入任何搜索词时，它工作正常。但是如果我删除整个搜索词或输入空格会导致错误。This is the error I got

这是我的 SearchComponent.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';


@Component({
  selector: 'app-admin-search',
  templateUrl: './admin-search.component.html',
  styleUrls: ['./admin-search.component.css']
})
export class AdminSearchComponent implements OnInit {

    books: any[] = [];
    searchTerm$ = new Subject<string>();

    constructor (private bookService: BookService,
                 private http: HttpClient
    ) {
        this.bookService.search(this.searchTerm$)
            .subscribe(results => {
                this.books = results.items;
            });
    }

    ngOnInit() {
    }

这是我的 SearchComponent.html

<div>
    <h4>Book Search</h4>
    <input #searchBox id="search-box"
           type="text"
           placeholder="Search new book"
           (keyup)="searchTerm$.next($event.target.value)"/>

    <ul *ngIf="books" class="search-result">
        <li *ngFor="let book of books">
            {{ book.volumeInfo.title }}
        </li>
    </ul>
</div>

这是我的 BookService.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';

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

import { Book } from './book';
import { BOOKS } from './mock-books';

import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@Injectable()
export class BookService {
    private GoogleBookURL: string = "https://www.googleapis.com/books/v1/volumes?q=";

    constructor (private http: HttpClient) { }


    search(terms: Observable<string>) {
        return terms.debounceTime(300)
                    .distinctUntilChanged()
                    .switchMap(term => this.searchEntries(term));
    }
    searchEntries(searchTerm: string) {
        if (searchTerm.trim()) {
            searchTerm = searchTerm.replace(/\s+/g, '+');
            let URL = this.GoogleBookURL + searchTerm;
            return this.http.get(URL);

        }
    }

}

有人可以帮帮我吗？提前致谢！

【问题讨论】：

标签： angular4-httpclient

【解决方案1】：

只有当searchTerm.trim() 是true 时，您的方法searchEntries 才会返回值(Observable<Response>)（因此它必须返回非空字符串）。

如果trim() 返回''（空字符串，即false），则searchEntries 可能会返回undefined 而不是Obervable<Response>。您不能将从searchEntries 返回的undefined 传递给.switchMap(term => this.searchEntries(term));。

在这种情况下，您的代码将如下所示： .switchMap(term => undefined) 这不是有效的构造。

【讨论】：