Polymer: Modell: Zahlendatentyp wird aufgrund von Benutzereingaben in Zeichenfolge umgewandelt

Erstellt am 1. Juli 2015 · 3Kommentare · Quelle: Polymer/polymer

Eigenschaften, die als Datentyp Number sind, werden aufgrund von Benutzereingaben in den Datentyp String konvertiert. Ich frage mich, dieses Symptom tritt nicht nur bei iron-input oder paper-input , aber das ist das Verhalten von Polymer. Gibt es eine einfache Möglichkeit, die Datentypkonvertierung zu stoppen?

Bitte geben Sie eine beliebige Zahl in das folgende iron-input . "string" wird immer angezeigt.

index.html:

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="proto.html">
  </head>
  <body>
    <proto-element></proto-element>
  </body>
</html>

proto.html:

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-input/iron-input.html">
<dom-module id="proto-element">
    <template>
        <input is="iron-input" bind-value="{{value}}">
    </template>
</dom-module>
<script>
    Polymer({
        is: "proto-element",
        properties:{
            value:{
                type:Number,
                value:1,
                observer:"valueChanged"
            }
        },
        valueChanged:function(n,o){
            if(typeof o != "undefined")
                alert(typeof n);
        }
    });
</script>

question

Quelle

masaoliou

Hilfreichster Kommentar

Dies ist nicht das Verhalten von Polymer, sondern das Standardverhalten von DOM. Die Eigenschaft input Tags value ist ein Zeichenfolgenwert:

https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement

Das type: Number auf der Eigenschaft hat keinen Einfluss darauf; dieser Wert wird nur beim Deserialisieren verwendetein Attributwert aus Markup . Wenn Sie also ein Markup wie folgt haben:

 <my-element value="123">

Sie konfigurieren die Eigenschaft value mit der Zeichenfolge "123". Wenn value type: Number ,
es wird als Nummer 123 deserialisiert.

Auf der anderen Seite dies:

<my-element value="{{hostValue}}">

Bindet die Eigenschaft hostValue des Hosts an die Eigenschaft value von my-element . Hier erfolgt keine Typkonvertierung; sie haben den gleichen Wert.

Sie müssen also den Zeichenfolgenwert der Eingabe in einen anderen Wert konvertieren. input Stellt eine valueAsNumber Eigenschaft bereit, die Sie wie folgt binden könnten:

    <input is="iron-input"  type="number" value-as-number="{{value::input}}">

Alternativ können Sie den Wert in Ihrer Methode valueChanged erzwingen:

    valueChanged:function(n) {
        if(typeof n == "string") {
          this.value = Number(n);
        }
    }

arthurevans am 1. Juli 2015

👍3 ❤1

Alle 3 Kommentare

Dies ist nicht das Verhalten von Polymer, sondern das Standardverhalten von DOM. Die Eigenschaft input Tags value ist ein Zeichenfolgenwert:

https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement

Das type: Number auf der Eigenschaft hat keinen Einfluss darauf; dieser Wert wird nur beim Deserialisieren verwendetein Attributwert aus Markup . Wenn Sie also ein Markup wie folgt haben:

 <my-element value="123">

Sie konfigurieren die Eigenschaft value mit der Zeichenfolge "123". Wenn value type: Number ,
es wird als Nummer 123 deserialisiert.

Auf der anderen Seite dies:

<my-element value="{{hostValue}}">

Bindet die Eigenschaft hostValue des Hosts an die Eigenschaft value von my-element . Hier erfolgt keine Typkonvertierung; sie haben den gleichen Wert.

Sie müssen also den Zeichenfolgenwert der Eingabe in einen anderen Wert konvertieren. input Stellt eine valueAsNumber Eigenschaft bereit, die Sie wie folgt binden könnten:

    <input is="iron-input"  type="number" value-as-number="{{value::input}}">

Alternativ können Sie den Wert in Ihrer Methode valueChanged erzwingen:

    valueChanged:function(n) {
        if(typeof n == "string") {
          this.value = Number(n);
        }
    }

arthurevans am 1. Juli 2015

👍3 ❤1

@arthurevans Vielen Dank für die ausführliche Erklärung!
Vielleicht hilft es auch anderen Benutzern, es in die FAQ von Polymer aufzunehmen.

masaoliou am 2. Juli 2015

👍1

Wenn Sie Requisiten verwenden, geben Sie arrayObject ein. Sie können so auflösen.
https://github.com/pongpanot-t/lab-polymer/blob/master/data-binding/bind-prop-number.html

tonsai-j am 30. Sept. 2016

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Polymer: Modell: Zahlendatentyp wird aufgrund von Benutzereingaben in Zeichenfolge umgewandelt

Hilfreichster Kommentar

Alle 3 Kommentare

Verwandte Themen