मैंने कोणीय में एक घटक बनाया है जो एक एक्सएमएल फ़ाइल पढ़ता है और इसे HTML तालिका में प्रदर्शित करने के लिए एक पार्सर का उपयोग करता है जो घटक है। पार्सिंग विधि के भीतर, मैं पढ़ने वाले एक्सएमएल डेटा में पहुंचने पर कुछ पहलुओं को संशोधित करके प्रदर्शित डेटा की कार्यक्षमता को बदलना चाहता हूं, लेकिन जब भी मैं उस विधि को कॉल करने का प्रयास करता हूं जो बदले गए डेटा को वापस कर देगा मुझे एक त्रुटि प्राप्त होती है बताते हुए:

"core.js: 15724 त्रुटि त्रुटि: ध्यान में नहीं आया (वादे में): लेखन त्रुटि: अपरिभाषित प्रकार की संपत्ति 'मुद्राConvChange' नहीं पढ़ सकता: अपरिभाषित की संपत्ति 'CurrencyConvChange' नहीं पढ़ सकता"।

यह मेरे मुख्य घटक की टाइपप्रति फ़ाइल के लिए कोड है:

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

मैं अपनी वांछित विधि को "this.CurrencyConvChange(test_1, test_2)" लाइन में कॉल कर रहा हूं और प्राप्त त्रुटि से भ्रमित हूं क्योंकि मैंने पहले से ही किसी अन्य से पहले CurrencyConvChange विधि को परिभाषित किया है। मैं टाइपस्क्रिप्ट के लिए कुछ नया हूं और सोच रहा था कि क्या यह किसी प्रकार का नियम था जिससे मैं पहले अनजान था?

0
Alex H 17 जिंदा 2020, 17:24
1
आपको एसिंक्स को वादे के साथ मिलाने पर विचार करना चाहिए नहीं, एक या दूसरे को चुनना और इसके साथ पूरी तरह से जाना बेहतर है।
 – 
Nicolas
17 जिंदा 2020, 17:34

2 जवाब

सबसे बढ़िया उत्तर

यह न तो टाइपस्क्रिप्ट से संबंधित है और न ही वादों से। यह this संदर्भ से संबंधित है।

आप कॉलबैक फ़ंक्शन को परिभाषित करते हैं

 parser.parseString(data, function(err, result)

उस फ़ंक्शन के अंदर आप this तक पहुंचने का प्रयास करते हैं

 this.CurrencyConvChange

लेकिन उस फ़ंक्शन के अंदर this आपके द्वारा परिभाषित कॉल बैक फ़ंक्शन को संदर्भित करता है। आपके घटक उदाहरण के लिए नहीं। यदि आप सही this को इंगित करना चाहते हैं तो नीचे दिए गए अपने कॉलबैक को परिभाषित करने के लिए एरो फ़ंक्शन का उपयोग करें:

 parser.parseString(data, (err, result) => ....

या नीचे की तरह एक बदसूरत समाधान का उपयोग करें:

let that = this; // outside of function
// inside your function
that.CurrencyConvChange 
4
Eldar 17 जिंदा 2020, 17:33
आह, मैं अब देखता हूँ। आपकी मदद के लिए बहुत बहुत धन्यवाद।
 – 
Alex H
17 जिंदा 2020, 17:40

मेरे पास एक बेवकूफ फिक्स है जो अक्सर उपयोग करता है। अपनी कक्षा में घोषित करें:

static _this: any;

आपके कंस्ट्रक्टर में असाइन करें:

TableofsharesComponent._this = this;

फिर आप अपने फ़ंक्शन को इस तरह कॉल कर सकते हैं:

TableofsharesComponent._this.CurrencyConvChange(test_1, test_2). 

अगर यह एक बुरा विचार है तो मुझे यह सुनना अच्छा लगेगा कि मैं अपना कोड सही क्यों कर सकता हूं।

0
xsoftie 17 जिंदा 2020, 17:42