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

31 Views Asked by At

I'm creating a dom-repeat module using Polymer 2. It is a simple array of objects.

I have tried using both one-way and two-way binding for the items attribute, i have tried adding and removing the "as" attribute.

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

1

There are 1 best solutions below

0
Cappittall On

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>