Leere Wert auf Polymer berechnet Attribut

Question

Ich versuche, das berechnete Attribut in Polymer zu verwenden, aber ich bekomme immer einen leeren Wert. In diesem Fall habe ich ein Attribut in meinem benutzerdefinierten Element namens datagraph. Und ich mache eine Post-Anfrage an einen Server, erhalte eine JSON-Datei, berechne das Ergebnis und zeige es dann an. Das ist mein benutzerdefiniertes Element:

<dom-module id="cost-card"> 
    <template> 
    <style> 
     p.datos3{ 
     color: #10cebc; 
     text-align: center; 
     font-size: 22px; 
     margin-top: 0px; 
     } 
    </style> 
    <p class="datos3">{{datagraph}}</p> 
    </template> 
    <script> 
    Polymer({ 
     is: "cost-card", 

     properties:{ 
    usr:{ 
     type: Number, 
     value: 2 
    }, 
    command:{ 
     type: String, 
     value: "SP_GetCostoCampania" 
    }, 
    datagraph:{ 
     type: Number, 
     computed: 'getCost(command,usr)' 
    } 
    }, 

     getCost: function(command,usr){ 

     var options = { 
      hostname: 'localhost', 
      path: '/', 
      port: 8081, 
      secure: false, 
      method: 'POST', 
      headers: { 
      'x-powered-by': 'HTTPClient.js' 
      }, 
      'Content-Type': 'application/json' 
     } 

     var innerCost; 

     var example1 = new HTTPClient(options); 
     example1.post("/executeGraph1?command="+ command + "&param1=" + usr, function (err, res, body) { 

      body = JSON.parse(body); 

      innerCost = body[0].price * body[0].exchengeRate; 
     }); 

     return innerCost; 
     } 
    }); 
    </script> 
</dom-module> 

Ich habe eine Express-Server ausgeführt wird, wird die Information korrekt geliefert, aber der {{}} Datengraph-Tag hält leer. Ich denke, es kann sein, weil die Post-Anfrage eine asychrone Aufgabe ist, und der Wert wird später geliefert, aber ich habe auch versucht, Promise mit dem gleichen Ergebnis zu verwenden.

Kennt jemand den richtigen Weg, dies zu tun?

Answer 1

Wie Sie bereits angedeutet haben, wird getCost immer undefiniert zurückgegeben, da return innerCost vor dem Rückruf des Posts ausgeführt wird.

Computed properties sind dazu gedacht, andere Eigenschaften als Argumente aufzunehmen und sind so ausgelegt, dass sie synchron sind. Wenn getCost ein Argument übernommen hat, würden Sie selbst dann einen Beobachter verwenden, der this.datagraph innerhalb des Callbacks direkt setzt.

Da Sie keine Argumente in getCost Fütterung, würde ich vorschlagen, dass Sie stattdessen eine ready callback verwenden, die die Post-Anforderung macht und setzt this.datagraph innerhalb der Callback.

Zum Beispiel:

Polymer({ 
    is: "cost-card", 

    properties: { 
     usr: { type: Number, value: 2 }, 
     command: { type: String, value: "SP_GetCostoCampania" }, 
     datagraph: Number 
    }, 

    observers: [ "getCosto(command, usr)" ], 

    getCosto: function (command, usr) { 

     var options = { 
      hostname: "localhost", 
      path: "/", 
      port: 8081, 
      secure: false, 
      method: "POST", 
      headers: { "x-powered-by": "HTTPClient.js" }, 
      "Content-Type": "application/json" 
     }; 

     const uri = `/executeGraph1?command=${command}&param1=${usr}`; 
     new HTTPClient(options).post(uri, (err, res, body) => { 

      // values have changed, ignore result (ideally cancel the HTTP request) 
      if (command !== this.command || usr !== this.usr) return; 

      body = JSON.parse(body); 

      this.datagraph = body[ 0 ].price * body[ 0 ].exchengeRate; 

     }); 

    } 

});