My Angular component is designed to read XML files and parse the data to display it on an HTML table. I'm trying to enhance the functionality of the displayed data by making modifications as specific points in the XML file are reached. However, whenever I attempt to call a method that should return the modified data, I encounter the following error message:
"core.js:15724 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'CurrencyConvChange' of undefined TypeError: Cannot read property 'CurrencyConvChange' of undefined".
Below is the TypeScript code for my main component:
import { Component, OnInit } from '@angular/core';
import * as xml2js from 'xml2js';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { DataStoreService } from '../../data-store.service';
@Component
({
selector: 'app-tableofshares',
templateUrl: './tableofshares.component.html',
styleUrls: ['./tableofshares.component.css']
})
export class TableofsharesComponent
{
public xmlItems: any;
new_curr_value;
test_1 = 1;
test_2 = 1;
constructor(private http: HttpClient, private store: DataStoreService)
// tslint:disable-next-line: one-line
{
this.loadXML(); // Runs below function when the project is started.
}
async CurrencyConvChange(test_1, test_2)
{
console.dir("recieved test 1: " + test_1);
console.dir("recieved test 2: " + test_2);
return 0;
}
// Loads the data
loadXML()
{
this.http.get('assets/Shares_Data.xml',
{
headers: new HttpHeaders()
.set('Content-Type', 'text/xml')
.append('Access-Control-Allow-Methods', 'GET')
.append('Access-Control-Allow-Origin', '*')
// tslint:disable-next-line: max-line-length
.append('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method'),
responseType: 'text'
}).subscribe((data) => {
this.parseXML(data).then((data) =>
{
this.xmlItems = data; // Assigns xmlItems data from request
});
});
}
// Manipulates the data
async parseXML(data)
{
return new Promise(resolve =>
{
let k: string | number,
arr = [],
test_var,
parser = new xml2js.Parser({trim: true, explicitArray: true});
parser.parseString(data, function(err, result)
{
const obj = result.ShareList;
// tslint:disable-next-line: forin
for (k in obj.share)
{
const item = obj.share[k];
const test_1 = item.sharePrice[0].currency[0];
console.dir("test 1: " + test_1);
const test_2 = item.sharePrice[0].value[0];
console.dir("Test 2: " + test_2);
this.CurrencyConvChange(test_1, test_2);
arr.push
({
title: item.title[0], companySymbol: item.companySymbol[0],
numOfShares: item.numOfShares[0], lastShareUpdate: item.lastShareUpdate[0],
currency: item.sharePrice[0].currency, value: item.sharePrice[0].value
});
}
resolve(arr);
});
});
}
}
The error arises when I try to call my desired method with the line "this.CurrencyConvChange(test_1, test_2)". I'm puzzled by this error since I've defined the method CurrencyConvChange before any other methods. As a newcomer to TypeScript, I'm curious if this issue stems from a rule I may have overlooked?