Question

我目前正在关注本教程，以学习如何在Spring Boot Web服务之上构建有角度的客户端：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
}

如何正确使用Angular 6 Pipe语法

1 个答案: