Typescript undefined dies. Geben Sie

Question

Für eine Zuordnung müssen wir eine Thermostat-App machen. Ich und meine Gruppe würden das gerne im ionischen Rahmen tun. Mit etwas Hilfe war ich in der Lage, die api.js, mit denen wir arbeiteten, bis zu einem gewissen Punkt mit ionischem Arbeiten zu versorgen. Aber jetzt ist mir ein Fehler bekannt, den ich nicht beheben kann.

Dies ist die neue API.ts:

import * as $ from 'jquery'; 
//import * as http from '@angular/http'; 

export class API { 
    ServerUrl = ''; 

    Type = { 
    Day: 'day', 
    Night: 'night' 
    }; 

    Days = { 
    Monday: 'Monday', 
    Tuesday: 'Tuesday', 
    Wednesday: 'Wednesday', 
    Thursday: 'Thursday', 
    Friday: 'Friday', 
    Saturday: 'Saturday', 
    Sunday: 'Sunday' 
    }; 

    MinTemperature = parseFloat('5.0'); 
    MaxTemperature = parseFloat('30.0'); 
    MaxSwitches = 5; 

    Time; 
    CurrentDay; 
    DayTemperature; 
    NightTemperature; 
    CurrentTemperature; 
    TargetTemperature; 
    ProgramState; 

    Program:any = {}; 

    constructor() { 
    this.Program[this.Days.Monday] = []; 
    this.Program[this.Days.Tuesday] = []; 
    this.Program[this.Days.Wednesday] = []; 
    this.Program[this.Days.Thursday] = []; 
    this.Program[this.Days.Friday] = []; 
    this.Program[this.Days.Saturday] = []; 
    this.Program[this.Days.Sunday] = []; 
    } 

    /* Retrieve day program 
    */ 
    getProgram(day) { 
    return this.Program[day]; 
    } 

    /* Sorts the heating periods (the periods when the heating is on) and merges overlapping ones 
    */ 
    sortMergeProgram(day) { 
    let program = this.getProgram(day); 
    program.sort(function(a, b) { 
     return this.parseTime(a[0]) - this.parseTime(b[0]) 
    }); 
    for (let i = 0; i < program.length - 1; i++) { 
     if (this.parseTime(program[i][1]) >= this.parseTime(program[i + 1][0])) { 
     let start = (program[i][0]); 
     let end = (this.parseTime(program[i][1]) > this.parseTime(program[i + 1][1])) ? program[i][1] : program[i + 1][1]; 
     program.splice(i, 2); 
     program.push([start, end]); 
     this.sortMergeProgram(day); 
     break; 
     } 
    } 
    } 

    /* Retrieves all data from the server except for weekProgram 
    */ 
    get(attribute_name) { 
    return this.requestData(
     "/" + attribute_name, 
     function(data) { 
     return $(data).text(); 
     } 
    ); 
    } 

    /* Retrieves the week program 
    */ 
    getWeekProgram() { 
    return this.requestData(
     '/weekProgram', 
     function(data) { 
     $(data).find('day').each(function() { 
      let day = (<any>$(this)).attr('name'); 
      this.Program[day] = []; 
      $(this).find('switch').each(function() { 
      if ((<any>$(this)).attr('state') == 'on') { 
       if ((<any>$(this)).attr('type') == this.Type.Day) { 
       this.getProgram(day).push([$(this).text(), '00:00']); 
       } else { 
       this.getProgram(day)[this.getProgram(day).length - 1][1] = $(this).text(); 
       } 
      } 
      }) 
     }); 
     return this.Program; 
     } 
    ); 
    } 

    /* Uploads all data to the server except for currentTemperature and weekProgram 
    */ 
    put(attribute_name, xml_tag, value) { 
    this.uploadData("/" + attribute_name, "<" + xml_tag + ">" + value + "</" + xml_tag + ">"); 
    } 

    requestData(address, func) { 
    let result; 
    (<any>$).ajax({ 
     type: "get", 
     url: this.ServerUrl + address, 
     dataType: "xml", 
     async: false, 
     success: function(data) { 
     result = func(data); 
     } 
    }); 
    return result; 
    } 

    /* Uploads the week program 
    */ 
    setWeekProgram() { 
    let doc = document.implementation.createDocument(null, null, null); 
    let program = doc.createElement('week_program'); 
    program.setAttribute('state', this.ProgramState ? 'on' : 'off'); 
    for (let key in this.Program) { 
     let day = doc.createElement('day'); 
     day.setAttribute('name', key); 

     let daySwitches = []; 
     let nightSwitches = []; 

     let i, text, sw; 
     let periods = this.getProgram(key); 
     for (i = 0; i < periods.length; i++) { 
     daySwitches.push(periods[i][0]); 
     nightSwitches.push(periods[i][1]); 
     } 

     for (i = 0; i < this.MaxSwitches; i++) { 
     sw = doc.createElement('switch'); 
     sw.setAttribute('type', this.Type.Day); 

     if (i < daySwitches.length) { 
      sw.setAttribute('state', 'on'); 
      text = doc.createTextNode(daySwitches[i]); 
     } else { 
      sw.setAttribute('state', 'off'); 
      text = doc.createTextNode('00:00'); 
     } 
     sw.appendChild(text); 
     day.appendChild(sw); 
     } 

     for (i = 0; i < this.MaxSwitches; i++) { 
     sw = doc.createElement('switch'); 
     sw.setAttribute('type', this.Type.Night); 

     if (i < nightSwitches.length) { 
      sw.setAttribute('state', 'on'); 
      text = doc.createTextNode(nightSwitches[i]); 
     } else { 
      sw.setAttribute('state', 'off'); 
      text = doc.createTextNode('00:00'); 
     } 
     sw.appendChild(text); 
     day.appendChild(sw); 
     } 
     program.appendChild(day); 
    } 
    doc.appendChild(program); 
    this.uploadData('/weekProgram', (new XMLSerializer()).serializeToString(doc)); 
    } 

    /* Creates the default week program 
    */ 
    setDefault() { 
    let doc = document.implementation.createDocument(null, null, null); 
    let program = doc.createElement('week_program'); 
    program.setAttribute('state', this.ProgramState ? 'on' : 'off'); 
    for (let key in this.Program) { 
     let day = doc.createElement('day'); 
     day.setAttribute('name', key); 

     let daySwitches = []; 
     let nightSwitches = []; 

     let i, text, sw; 

     for (i = 0; i < this.MaxSwitches; i++) { 
     sw = doc.createElement('switch'); 
     sw.setAttribute('type', this.Type.Night); 
     sw.setAttribute('state', 'off'); 
     text = doc.createTextNode('00:00'); 
     sw.appendChild(text); 
     day.appendChild(sw); 
     } 

     for (i = 0; i < this.MaxSwitches; i++) { 
     sw = doc.createElement('switch'); 
     sw.setAttribute('type', this.Type.Day); 
     sw.setAttribute('state', 'off'); 
     text = doc.createTextNode('00:00'); 
     sw.appendChild(text); 
     day.appendChild(sw); 
     } 

     program.appendChild(day); 
    } 
    doc.appendChild(program); 
    this.uploadData('/weekProgram', (new XMLSerializer()).serializeToString(doc)); 
    } 

    uploadData(address, xml) { 
    (<any>$).ajax({ 
     type: "put", 
     url: this.ServerUrl + address, 
     contentType: 'application/xml', 
     data: xml, 
     async: false 
    }); 
    } 

    parseTime(t) { 
    return parseFloat(t.substr(0, 2)) + parseFloat(t.substr(3, 2))/60; 
    } 

    /* Adds a heating period for a specific day 
    */ 
    addPeriod(day, start, end) { 
    let program = this.getWeekProgram()[day]; 
    program.push([start, end]); 
    this.sortMergeProgram(day); 
    this.setWeekProgram(); 
    } 

    /* Removes a heating period from a specific day. 
    idx is the idex of the period with values from 0 to 4 
    */ 
    removePeriod(day, idx) { 
    let program = this.getWeekProgram()[day]; 
    let start = program[idx][0]; 
    let end = program[idx][1]; 
    program.splice(idx, 1); 
    this.setWeekProgram(); 
    } 

    /* Checks whether the temperature is within the range [5.0,30.0] 
    */ 
    inTemperatureBoundaries(temp) { 
    temp = parseFloat(temp); 
    return (temp >= this.MinTemperature && temp <= this.MaxTemperature); 
    } 
} 

Die Funktion ich ein Problem habe mit getWeekProgram() ist es die Wochenprog Abrufen ganz gut von dem Server, der zur Verfügung gestellt wurde. Aber dieser Server sendet XML-Antworten (keine Möglichkeit, JSON zu bekommen ...) und wenn die Zeile this.Program[day] = [] läuft, bekomme ich den folgenden Fehler: Runtime Error, this.Program[day] is undefined. Ich habe keine Ahnung, wie ich diesen Fehler beheben kann. Ich habe versucht, die Zeile zu entfernen und habe versucht, das Programm in ein großes Array anstatt eines Objekts zu verwandeln, aber nichts funktioniert leider.

Dies ist die XML-Daten arbeiten wir mit:

<week_program state="off"> 
    <day name="Monday"> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    </day> 
    <day name="Tuesday"> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    </day> 
    <day name="Wednesday"> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    </day> 
    <day name="Thursday"> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    </day> 
    <day name="Friday"> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    </day> 
    <day name="Saturday"> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    </day> 
    <day name="Sunday"> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="night" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    <switch type="day" state="off">00:00</switch> 
    </day> 
</week_program> 

Answer 1

Die verschiedenen this Referenzen in den inneren Funktionen der Klasseninstanz beziehen sich nicht. Der aktuelle this wird nicht in Funktionen übertragen, wenn die Funktion mit der Syntax function(){...} deklariert wird; Um dies zu tun, müssen Sie diese Syntax verwenden: ()=>{...}. Sie können mehr darüber lesen, wie sich this verhält in the TypeScript wiki.

In Ihrem Fall möchten Sie jedoch nicht die ()=>{...}-Syntax verwenden, weil Sie sich auf this beziehen, um auf die Elemente zu verweisen, die von .each verarbeitet werden. Daher müssen Sie die Klasseninstanz this in einer anderen Variablen auf der Außenseite manuell speichern. Ein gebräuchlicher Name für solche Variablen ist self:

getWeekProgram() { 
    let self = this; 
    return this.requestData(
     '/weekProgram', 
     function(data) { 
     $(data).find('day').each(function() { 
      let day = (<any>$(this)).attr('name'); 
      self.Program[day] = []; 
      $(this).find('switch').each(function() { 
      if ((<any>$(this)).attr('state') == 'on') { 
       if ((<any>$(this)).attr('type') == self.Type.Day) { 
       self.getProgram(day).push([$(this).text(), '00:00']); 
       } else { 
       self.getProgram(day)[self.getProgram(day).length - 1][1] = $(this).text(); 
       } 
      } 
      }) 
     }); 
     return self.Program; 
     } 
    ); 
    }