Почему dom-repeat не создает шаблон по значению массива? - PullRequest
Новая
       41

Почему dom-repeat не создает шаблон по значению массива?

0 голосов
/ 27 апреля 2019

Я создаю модуль dom-repeat, используя Polymer 2. Это простой массив объектов.

Я пытался использовать как одностороннюю, так и двустороннюю привязку для атрибута items, я пытался добавить и удалить атрибут "as".

Это мой код компонента. Это единственный в моем проекте 

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

Ничего не печатается

1 Ответ

0 голосов
/ 06 мая 2019

Кажется, в ваших кодах ничего нет. Это работает здесь, так как вы можете запустить код 

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