Question

请原谅noob问题，我已经使用聚合物添加到项目中，但我无法弄清楚我做错了什么。

我有以下组件：

  <template>
    <div class="hb-graph">
      <h3 class="hb-graph__headline">[[headline]]</h3>
      <div class="hb-graph__container">
        <div class="hb-graph__graph"
             style="width:[[barWidth]]%">
        </div>
        <div class="hb-graph__rates">
          <span class="hb-graph__bar-value">
            [[barValue]]
          </span>
          <span class="hb-graph__bar-value-rate">
            [[barValueRate]]
          </span>
        </div>
        <span class="hb-graph__beginning-range hb-graph__range">
          0
        </span>
        <span class="hb-graph__final-range hb-graph__range">
          [[maxValue]]
        </span>
      </div>
    </div>
  </template>

  <script>
    Polymer({
      is: "horizontal-bar-graph",
      properties: {
        headline: String,
        maxValue: String,
        barValue: String,
        barValueRate: String,
        barWidth: Number
      }
    });
  </script>

当我将此元素加载到html模板中时，呈现的最终产品中唯一的值是标题。

<horizontal-bar-graph headline="Total Current Flow"
                      maxValue="4000"
                      barValue="3,300"
                      barValueRate="m3/h"
                      barWidth=82.5>
</horizontal-bar-graph>

为什么在渲染时不会显示其他值？

Answer 1

Here你可以找到谈论它的文档。

带有破折号的属性名称通过将每个破折号后面的字符大写，然后删除破折号来转换为camelCase属性名称。例如，属性first-name映射到firstName。

所以，这应该有效：

<horizontal-bar-graph headline="Total Current Flow"
                  max-value="4000"
                  bar-value="3,300"
                  bar-value-rate="m3/h"
                  bar-width=82.5>
</horizontal-bar-graph>

传递到聚合物元件的数据不完整

1 个答案: