I have written an Api as part of a coding exercise and am testing it in Postman as below. I'm content with how this works for now.
So now I'm wanting to call it from an Angular 9 project and I've written a service with code below but don't know how to assign the three parameters to the parameter 'model'
This is my service class
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;
}));
}
}
This is my component, and I'm wanting to call the service within getAnswerFromApi() but am not sure how to assign the three parameters
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;
}
}
this is how to do it
// 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);
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.