从angular 9服务类发出rest api调用

Question

作为编码练习的一部分，我已经编写了一个Api，并且正在用Postman进行测试，如下所示。我现在对它的工作方式很满意。

​

​

所以现在我想从一个Angular 9项目中调用它，我已经用下面的代码编写了一个服务，但不知道如何将这三个参数分配给参数'model‘。

这是我的服务类

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

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

  baseUrl = 'http://localhost:5000/api/Calculator/';

  constructor(private http: HttpClient) { }

  calculate(model: any) {
    return this.http.get(this.baseUrl, model)
      .pipe(map((response: any) => {
        const val = response;
      }));
  }

}

这是我的组件，我想在getAnswerFromApi()中调用服务，但不确定如何分配这三个参数

import { Component, OnInit } from '@angular/core';
import { CalcService } from '../_services/calc.service';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {
  title = 'Ofgem Calculator';

  model: any = {};

  subText = ''; // The text that should appear in the sub-display
  mainText = ''; // The text that should appear in the main display
  firstNumber: number; // The first operand
  secondNumber: number; // The second operand
  operator = ''; // The operator
  calculationString = '';
  // This is the string that denotes the operation being performed
  answered = false;
  operatorSet = false;

  answer = '';

  constructor(private calcService: CalcService) { }

  ngOnInit() {
  }

  pressKey(key: string) {
    if (key === '/' || key === 'x' || key === '-' || key === '+') {
       const lastKey = this.mainText[this.mainText.length - 1];
       if (lastKey === '/' || lastKey === 'x' || lastKey === '-' || lastKey === '+')  {
         this.operatorSet = true;
       }
       if ((this.operatorSet) || (this.mainText === '')) {
         return;
       }
       this.firstNumber = parseFloat(this.mainText);
       this.operator = key;
       this.operatorSet = true;
    }
    if (this.mainText.length === 10) {
      return;
    }
    this.mainText += key;
 }

 getAnswerFromApi() {
   this.calculationString = this.mainText;
   this.secondNumber = parseFloat(this.mainText.split(this.operator)[1]);

   this.calcService.calculate(this.model).subscribe(next => {
     console.log('did calc');
   }, error => {
     console.log('failed calc');
   });

 }
  allClear() {
    this.subText = '';
    this.mainText = '';
    this.operator = '';
    this.calculationString = '';
    this.answered = false;
    this.operatorSet = false;
  }
}

Answer 1

这就是怎么做的

// service file

 .....    

calculate() {
    return this.http.get(this.baseUrl)
  }

......

// component ts file

getAnswerFromApi() {
   ....

   this.calcService.calculate()
    .subscribe((next : any) => {
     this.model = next;
   }, error => {
     console.log('failed calc', error);
   });

 }