web-dev-qa-db-fra.com

Dactylographier promettent de perdre des valeurs après .then

J'ai une fonction dans un service Angular2 qui renvoie les données Mock via Promise.resolve qui, une fois déballées avec .then, me donnent un objet de promesse vide. Je peux voir que la fonction appelante reçoit la promesse avec la charge utile dans la propriété __zone_symbole__value avant de la transmettre à .then however inside of. ThenI seem to be left with just an empty promise.

  getTemperatureData(): Promise<any> {

    let data = this.convertJSONToGoogleChartTable(temperatureData_JSON);
    let p = Promise.resolve(data);
    return p;
  }

En utilisant Chrome, je vois que p ci-dessus ressemble à

ZoneAwarePromise {__zone_symbol__state: true, __zone_symbol__value: "[["Date","Temperature","LowTemperature"],["05/11/2…",69.02,null],["06/11/2016 23:54:34",69.99,null]]"}

Le code appelant qui est divisé en deux lignes pour déboguer est ci-dessous.

getTemperatureData() {
    var d = this.dataService.getTemperatureData();
    d.then(data => this.line_ChartData = data);
}

Quand je regarde d je vois la même chose que p ci-dessus

ZoneAwarePromise {__zone_symbol__state: true, __zone_symbol__value: "[["Date","Temperature","LowTemperature"],["05/11/2…",69.02,null],["06/11/2016 23:54:34",69.99,null]]"}

Le problème se produit avec le .then où la valeur de "d" est juste une promesse vide. Les informations ci-dessous sont extraites de la console d'outils de développement Chrome pour montrer ce que je vois.

d.then(data => console.log(data))
ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array[0]}

Peu importe ce que je fais et le nombre de combinaisons que j'ai essayées, je ne peux pas accéder à mes données à l'intérieur de d. (Notez que p et d ne sont que temporaires pour décomposer le code pour le moment.)

Mon package.json est ci-dessous:

{
  "name": "angular2",
  "version": "0.0.0",
  "license": "MIT",

  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/material": "^2.0.0-alpha.9-3",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "core-js": "^2.4.1",
    "ng2-bootstrap": "^1.1.16",
    "node-mysql": "^0.4.2",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.19-3",
    "codelyzer": "1.0.0-beta.1",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "TypeScript": "~2.0.3",
    "webdriver-manager": "10.2.5"
  }
}
angulartypescriptpromise
8
JSeatter

la valeur des données est juste une promesse vide

Cela me dit que convertJSONToGoogleChartTable renvoie une promesse et que vous ne l'enchaînez pas.

Notez que si vous utilisiez un type plus fort que any, le compilateur TypeScript l'aurait probablement intercepté.

Puisque vous ne faites rien après avoir obtenu ces données, vous pouvez simplement faire ceci:

  getTemperatureData(): Promise<any> {
    return this.convertJSONToGoogleChartTable(temperatureData_JSON);
  }

Mais si vous voulez utiliser quelque chose avec ces données avant de les renvoyer, vous pouvez le faire dans un then, enchaîné à la promesse initiale:

  getTemperatureData(): Promise<any> {
    return this.convertJSONToGoogleChartTable(temperatureData_JSON)
        .then(data => {
            console.log(data);
            return data;
        });
  }
2
StriplingWarrior