Question

我正在使用角度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);

        }
    }

}

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

Answer 1

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

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

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

错误类型错误：您提供了未定义的＆＃39;预期流的地方。您可以提供Observable，Promise，Array或Iterable

1 个答案: