Как правильно использовать синтаксис Angular 6 Pipe

Question

В настоящее время я изучаю этот урок, чтобы узнать, как построить угловой клиент поверх веб-службы Spring Boot: https://developer.okta.com/blog/2017/12/04/basic-crud-angular-and-spring-boot

Проблема, с которой я столкнулся, находится в следующем фрагменте кода:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';

@Injectable()
export class GiphyService {

    // Public beta key: https://github.com/Giphy/GiphyAPI#public-beta-key
    giphyApi = '//api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&limit=1&q=';

    constructor(public http: HttpClient) {
    }

    get(searchTerm) {
        const apiLink = this.giphyApi + searchTerm;
        return this.http.get(apiLink).map((response: any) => {
            if (response.data.length > 0) {
                return response.data[0].images.original.url;
            } else {
                return 'https://media.giphy.com/media/YaOxRsmrv9IeA/giphy.gif'; // dancing cat for 404
            }
        });
    }
}

За последние 24 часа я провел обширные исследования и пролил кровь, и вот к чему я дошел. Импорт в более новой версии angular устарел, поэтому я изменил импорт на:

import { map } from 'rxjs/operators'

Также может показаться, что оператор .map устарел, и, очевидно, вам необходимо использовать синтаксис канала. Моя проблема в том, что я пытался использовать это, но я просто не могу понять это. Следующее выдает синтаксическую ошибку:

get(searchTerm) {
    const apiLink = this.giphyApi + searchTerm;
    return this.http.get(apiLink)
        .pipe(
            map((response: any) => {
                if (response.data.length > 0) {
                    return response.data[0].images.original.url;
                } else {
                    return 'https://media.giphy.com/media/YaOxRsmrv9IeA/giphy.gif'; // dancing cat for 404
                }
            });
        )
}

Я, вероятно, смотрю в стену текста, учитывая, что я столько всего узнал за прошедшую неделю, поэтому простите меня заранее, если я что-то упустил.

Answer 1

Так что получается, что я был таким глупым, как думал. Я пытался использовать закрывающую скобку после точки с запятой. Пожалуйста, смотрите ниже обновленную функцию:

get(searchTerm) {
    const apiLink = this.giphyApi + searchTerm;
    return this.http.get(apiLink)
        .pipe(
            map((response: any) => {
                if (response.data.length > 0) {
                    return response.data[0].images.original.url;
                } else {
                    return 'https://media.giphy.com/media/YaOxRsmrv9IeA/giphy.gif'; // dancing cat for 404
                }
            })); //The closing bracket for pipe needs to be here
}