0

我正在使用 Polymer 2 创建一个 dom-repeat 模块。它是一个简单的对象数组。

我已经尝试对 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>

没有打印任何内容

4

1 回答 1

0

您的代码中似乎没有任何内容。它在这里工作，因为您可以运行代码

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>

于 2019-05-06T14:43:38.987 回答