從 angular 9 服務類進行休息 api 調用

Question

我已經編寫了一個 Api 作為編碼練習的一部分，並且正在 Postman 中進行測試，如下所示。 我對目前的工作方式感到滿意。

所以現在我想從一個 Angular 9 項目中調用它，我已經用下面的代碼編寫了一個服務，但不知道如何將三個參數分配給參數“模型”

這是我的服務類

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);
   });

 }