简体   繁体   English

为什么dom-repeat没有在数组值上创建模板?

[英]Why is dom-repeat not creating the template on array value?

I'm creating a dom-repeat module using Polymer 2. It is a simple array of objects. 我正在使用Polymer 2创建一个dom-repeat模块。它是一个简单的对象数组。

I have tried using both one-way and two-way binding for the items attribute, i have tried adding and removing the "as" attribute. 我尝试过对items属性使用单向和双向绑定,我尝试添加和删除“as”属性。

This is my code ofr the component. 这是我的组件代码。 It is the onlyone in my proyect 这是我唯一的一个项目

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="firebase-test">
  <template>
    <style>
    </style>
    <h2>Hello!</h2>
    <template is="dom-repeat" items="{{arrayContacts}}" as="contact">
      <p>{{contact.firstname}}</p>
    </template>
  </template>

  <script>
    class FirebaseTest extends Polymer.Element {
      static get is() { return 'firebase-test'; }
      static get properties() {
        return {
          arrayContacts: {
            type: Array,
            value:[{ firstname: "Jack", lastname: "Aubrey" },
            { firstname: "Anne", lastname: "Elliot" },
            { firstname: "Stephen", lastname: "Maturin" },
            { firstname: "Emma", lastname: "Woodhouse" }]
          }
        };
      }
    }

    window.customElements.define(FirebaseTest.is, FirebaseTest);
  </script>
</dom-module>

Nothing is being printed 什么都没打印出来

It seems there is nothing at your codes. 您的密码似乎没有任何内容。 It's working here as you can run code 它在这里工作,因为你可以运行代码

 HTMLImports.whenReady(function() { class FirebaseTest extends Polymer.Element { static get is() { return 'firebase-test'; } static get properties() { return { arrayContacts: { type: Array, value:[{ firstname: "Jack", lastname: "Aubrey" }, { firstname: "Anne", lastname: "Elliot" }, { firstname: "Stephen", lastname: "Maturin" }, { firstname: "Emma", lastname: "Woodhouse" }] } }; } } window.customElements.define(FirebaseTest.is, FirebaseTest); }); 
 <html> <head> <base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html"> <script src="webcomponentsjs/webcomponents-lite.js"></script> </head> <body> <firebase-test></firebase-test> <dom-module id="firebase-test"> <template> <style> </style> <h2>Hello!</h2> <template is="dom-repeat" items="{{arrayContacts}}" as="contact"> <p>{{contact.firstname}}</p> </template> </template> </dom-module> </body> </html> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM