Question

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

我尝试对项属性使用单向和双向绑定，我尝试添加和删除“ 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>

什么都没打印

Answer 1

您的代码似乎没什么。它可以在这里运行，因为您可以运行代码

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>

为什么dom-repeat无法在数组值上创建模板？

1 个答案: