Polymer: Modèle : le type de données numérique est converti en chaîne en raison de la saisie de l'utilisateur
Les propriétés définies à partir du type de données Number sont converties en type de données String raison de la saisie de l'utilisateur. Je me demande ce symptôme n'arrive pas seulement à iron-input ou paper-input , mais c'est le comportement de Polymer. Existe-t-il un moyen simple d'arrêter la conversion de type de données ?
Veuillez entrer n'importe quel nombre dans le iron-input . "string" apparaîtra toujours.
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>
masaoliou
Tous les 3 commentaires
Ce n'est pas le comportement de Polymer, c'est le comportement standard du DOM. La propriété input balise value est une valeur de chaîne :
https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement
Le type: Number sur la propriété n'affecte pas cela ; cette valeur n'est utilisée que lors de la désérialisationune valeur d'attribut du balisage . Donc, si vous avez un balisage comme celui-ci :
<my-element value="123">
Vous configurez la propriété value avec la chaîne "123". Si value est type: Number ,
il sera désérialisé sous le numéro 123.
D'autre part, ceci :
<my-element value="{{hostValue}}">
Lie la propriété hostValue l'hôte à la propriété my-element de value . Aucune conversion de type n'est impliquée ici ; ils ont la même valeur.
Vous devrez donc convertir la valeur de chaîne de l'entrée en quelque chose d'autre. input Fournit une propriété valueAsNumber , que vous pouvez lier comme ceci :
<input is="iron-input" type="number" value-as-number="{{value::input}}">
Alternativement, vous pouvez forcer la valeur dans votre méthode valueChanged :
valueChanged:function(n) {
if(typeof n == "string") {
this.value = Number(n);
}
}
arthurevans
le 1 juil. 2015
@arthurevans Merci beaucoup pour l'explication détaillée !
Peut-être que l'ajouter à la FAQ de Polymer aidera également d'autres utilisateurs.
masaoliou
le 2 juil. 2015
Si vous utilisez des accessoires, tapez arrayObject. vous pouvez restaurer comme ceci.
https://github.com/pongpanot-t/lab-polymer/blob/master/data-binding/bind-prop-number.html
tonsai-j
le 30 sept. 2016
Questions connexes
nazar-pc
·
4Commentaires
mbana
·
3Commentaires
ghost
·
4Commentaires
SergRZ
·
3Commentaires
myuseringithub
·
3Commentaires
Commentaire le plus utile
Ce n'est pas le comportement de Polymer, c'est le comportement standard du DOM. La propriété
inputbalisevalueest une valeur de chaîne :Le
type: Numbersur la propriété n'affecte pas cela ; cette valeur n'est utilisée que lors de la désérialisationune valeur d'attribut du balisage . Donc, si vous avez un balisage comme celui-ci :Vous configurez la propriété
valueavec la chaîne "123". Sivalueesttype: Number,il sera désérialisé sous le numéro 123.
D'autre part, ceci :
Lie la propriété
hostValuel'hôte à la propriétémy-elementdevalue. Aucune conversion de type n'est impliquée ici ; ils ont la même valeur.Vous devrez donc convertir la valeur de chaîne de l'entrée en quelque chose d'autre. input Fournit une propriété
valueAsNumber, que vous pouvez lier comme ceci :Alternativement, vous pouvez forcer la valeur dans votre méthode
valueChanged: