如何在嵌套组件中迭代数组？ （聚合物）

Question

我尝试将一个数组传递给我的子组件（macroNutriments）并迭代它但它不起作用，似乎根本没有传递数组。但是显示其他数据。我完全是Polymer的新手。

我的父组件：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../macro-aliment/macro-aliment.html">
    <dom-module id="macro-aliments">
      <template>
        <template is="dom-repeat" items="{{aliments}}">
          <macro-aliment
            nom = '{{item.nom}}'
            quantite = '{{item.quantite}}'
            image = '{{item.image}}'
            macroNutriments = '{{item.macroNutriments}}'
          >
        </macro-aliment>
        </template>
      </template>

      <script>
        Polymer({

          is: 'macro-aliments',
          ready : function () {
            this.aliments = [
              {
                nom : 'banane',
                quantite : '100g',
                image : 'images/banane.svg',
                macroNutriments : [
                  {
                    nom : 'Glucides',
                    valeur : '13g'
                  },
                  {
                    nom : 'Protéines',
                    valeur : '25g'
                  },
                  {
                    nom : 'Lipides',
                    valeur : '10g'
                  }
                ]
              },
              {
                nom : 'pomme',
                quantite : '1',
                image : 'images/pomme.svg',
                macroNutriments : [
                  {
                    nom : 'Glucides',
                    valeur : '13g'
                  },
                  {
                    nom : 'Protéines',
                    valeur : '25g'
                  },
                  {
                    nom : 'Lipides',
                    valeur : '10g'
                  }
                ]
              }
            ]
            }
          }
        );
      </script>
    </dom-module>

我的孩子组成部分：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="macro-aliment">
  <template>

  <figure>
    <img src="{{image}}" alt="">
    <figcaption>
      <header>
        <h1>{{nom}}</h1>
        <span>{{quantite}}</span>
        <span>{{macroNutriments}}</span>
      </header>
      <ul>
        <template is="dom-repeat" items="{{macroNutriments}}">
          <li>
            <span>{{item.valeur}}</span>
            <span>{{item.nom}}</span>
          </li>
        </template>
      </ul>
    </figcaption>
  </figure>
  </template>

  <script>
    Polymer({

      is: 'macro-aliment',

      properties : {
        nom : String,
        quantite : String,
        image : String,
        macroNutriments : Array,
      },


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

有什么想法吗？

Answer 1

问题出在这里：

macroNutriments : Array,

此属性名称采用 camelCase 样式，因此您应该像这样访问它：

<macro-aliment
        nom = '{{item.nom}}'
        quantite = '{{item.quantite}}'
        image = '{{item.image}}'
        macro-nutriments = '{{item.macroNutriments}}'
></macro-aliment>

macroNutriments = ... 更改宏观营养素= ...

使用短划线（ - ）和相同的字符，而不是大写字符，而不是大写字符。这只是一个HTML属性。

我建议两种解决方案。

解决方案1（推荐）

仅使用小写和 snake_style 进行属性命名。

macro_nutriments : Array

我在自定义元素属性命名中使用它，因此我建议您使用它。从来没有遇到任何问题。

这也是 W3Schools 推荐的内容。引自attributes page

  

HTML5标准不需要小写的属性名称。

     

title属性可以用大写或小写写成   标题或标题。

     

W3C建议使用HTML小写，并要求更小的更严格   文档类型，如XHTML。

解决方案2（不推荐）

尝试在HTML代码中访问此属性时使用短划线和小写字母。但是这有点令人困惑，而且你会一次又一次地忘记这一点的非常很大的机会。

祝你好运。

Answer 2

尝试将疾病的属性添加到您的父类。

is: 'macro-aliments',
properties: {
  ailments: {
    type: Array,
    notify: true
  }
},
ready: function(){  ...