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>

聚合物({
是‘宏元素’，
就绪：函数（）{
此参数为[
{
名称：“巴南”，
定量：“100g”，
图像：“images/banane.svg”，
大量营养素：[
{
名称：“糖浆”，
瓦勒尔：“13g”
},
{
名字：“Protéines”，
瓦勒尔：“25克”
},
{
名称：“Lipides”，
瓦勒尔：“10g”
}
]
},
{
名字：“pomme”，
量子位：“1”，
image:'images/pomme.svg'，
大量营养素：[
{
名称：“糖浆”，
瓦勒尔：“13g”
},
{
名字：“Protéines”，
瓦勒尔：“25克”
},
{
名称：“Lipides”，
瓦勒尔：“10g”
}
]
}
]
}
}
);

我的孩子部分：

<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>

{{nom}}
{{quantite}}
{{大量营养素}


{{item.valeur}}
{{item.nom}


聚合物({
是‘宏营养’，
特性：{
名字：字符串，
quantite：字符串，
图像：字符串，
大量营养素：数组，
},
});

---

有什么想法吗？

尝试将“疾病”属性添加到父类中

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

问题在于：

macroNutriments : Array,

此属性名称为camelCase样式，因此您应按如下方式访问它：

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

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

这也是W3Schools的建议。引自

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

title属性可以用大写或小写字母书写，如
头衔或头衔

W3C在HTML中建议使用小写，而在更严格的HTML中要求使用小写 像XHTML这样的文档类型

解决方案2（不推荐） 尝试在HTML代码中访问此属性时，请使用破折号和小写字母。但这有点让人困惑，你很有可能会一次又一次地忘记这一点

祝你好运