Ionic / Angular 8 错误：TypeError: this.sendData 不是一个函数

Question

以下是我的代码。 我只是试图对本地服务器进行GET请求并获取响应（它是一个JSON对象），然后将其发送给不同的Angular组件。 由于某种原因出现错误：ERROR TypeError: this.sendData不是函数

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

interface myData {
    data: Object
}

@Injectable({
    providedIn: 'root'
})
export class ApiService {

    goldProducts: any[] = [];
    httpOptions: any;

    constructor(private http: HttpClient) {}
    base_path = 'http://localhost:80';

    shareData = new Subject<any>();

    sendData(data: any) {
        this.shareData.next(data);
    }

    getGoldProducts() {
        this.httpOptions = {
            headers: new HttpHeaders({
                'Content-Type': 'application/json',

            })
        }
        return this.http.get<myData>(this.base_path + '/get/goldProducts', this.httpOptions).subscribe(function(res) {
            console.log(res);
            this.sendData(res);
        });
    }
}

这个组件要去的地方是：

import { Component } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ApiService } from '../services/api.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
    goldProducts: any[] = [];

    getItemPrices: any[] = [];
    constructor(public api: ApiService, public http: HttpClientModule) { }

    displayGoldProducts() {
       this.api.shareData.subscribe(data => {
           console.log(data);
       });
       this.api.getGoldProducts();
    }
}

函数 displayGoldProducts() 只是在 HTML 中与一个按钮连接起来。 我只能从 api.service 得到正确的响应控制台日志。 我不知道该如何连接它。我只想要一个 observable，这样当我从服务器推送新数据，也就是新的价格时，客户端上的价格将自动更新。这在 JavaScript 中很容易实现，但在 Angular 中似乎很繁琐。我正在学习 Angular，教程似乎涵盖了不同的用例。任何帮助都将不胜感激，并且可能只是一个格式问题。谢谢您的帮助。

- sasy solutions

---

尝试调用sendData函数时，查看this的值。它可能是调用该函数的函数而非类本身。为了解决这个问题，考虑使用箭头函数(res)=>{}。 - acenturyandabit

Answer 1

最初的回答：使用箭头函数的方法如下所示。

请按照以下方式使用箭头函数。

this.http.get<myData>
(this.base_path + '/get/goldProducts', 
this.httpOptions).subscribe
   (res => {
        this.sendData(res); 
  });

- Chanaka Weerasinghe

Answer 2

看看这个

this.http.get<yourData>
(this.base_path + '/get/goldProducts', 
this.httpOptions).subscribe
   (res => {
//handle your data
        this.sendData(res); 
  });

- Deelaka Meegoda

Answer 3

你可以这样使用箭头函数。

 getGoldProducts(){
    this.httpOptions = {
       headers: new HttpHeaders({
          'Content-Type': 'application/json',
       })
    }
    return this.http.get<myData>(this.base_path + '/get/goldProducts', this.httpOptions)
          .subscribe((res: any) => { 
              console.log(res); 
              this.sendData(res); 
           });
}

- Pushprajsinh Chudasama

Answer 4

你应该使用箭头函数（Lambda表达式）。箭头=>分隔函数参数和函数体。箭头=>右侧可以包含一个或多个代码语句。此外，它省略了使用“function”关键字的必要性。在TypeScript中，冒号后但等于符号（赋值）前的所有内容都是类型信息。

getGoldProducts(){
    this.httpOptions = {
        headers: new HttpHeaders({
           'Content-Type': 'application/json',
        })
     }
    //drop the use of function keyword while subcribing and use fat arrow instead.
    return this.http.get<myData>(this.base_path + '/get/goldProducts',this.httpOptions).subscribe(res => { 
       console.log(res); 
       this.sendData(res); 
   });

}

- Diksha235