Question

试图为我的小项目提供Polymer框架。解析对象内部数组的聚合物dom-repeat错误

以下是代码调用

  <paper-tabs scrollable selected={{selected}}>
    <template is="dom-repeat" items="{{rooms}}">
      <paper-tab>{{item.name}}</paper-tab>
    </template>
  </paper-tabs>

  <iron-pages selected="{{selected}}">
    <template is="dom-repeat" items="{{rooms}}">
      <div> <port-config room-config="{{item}}"></port-config> </div>
    </template>
  </iron-pages>

</template>

<script>
Polymer({
    is: "rooms-config",

    properties: {

    selected: {
        type:Number,
        value: 0,
      },

    rooms: {
        type: Array,
        value: function() {
          var testData = [
            {
              name: "Room1",
              maxPorts: 16,
              ports:{
                type: Array,
                value: function() {
                  var testData = [
                    {portName: "Port 1",portStatus: "true"},
                    {portName: "Port 2",portStatus: "true"},
                    {portName: "Port 3",portStatus: "true"},
                    {portName: "Port 4",portStatus: "true"},
                  ];
                  return testData;
                }
              }
            }
        }
     }
});

以下是我的port-config声明

<template>
<paper-material elevation="-1">
  <template is="dom-repeat" items="{{roomConfig.ports}}">
    <div class="container">
      <div class="flexchild">{{item.portName}}</div>
      <div class="flex1child">
        <paper-toggle-button toggles checked$="{{item.portStatus}}"></paper-toggle-button>
      </div>
      <div class="flex1child"><iron-icon icon="icons:settings"></iron-icon></div>
      </div>
  </template>
</paper-material>
</template>

<script>
Polymer({
    is: "port-config",
    properties: {

    roomConfig: {
      type: Object,
      value: function() { 
        return {};
      }
    }
  }
});

</script>

使用此设置我收到错误 [dom-repeat :: dom-repeat]：items的预期数组，找到了Object {}

Answer 1

问题应该是在属性的值上传递函数而不是值。

例如：

rooms: {
        type: Array,
        value: function() {
          var testData = [
            {
              name: "Room1",
              maxPorts: 16,
              ports:{
                type: Array,
                value: function() {
                  var testData = [
                    {portName: "Port 1",portStatus: "true"},
                    {portName: "Port 2",portStatus: "true"},
                    {portName: "Port 3",portStatus: "true"},
                    {portName: "Port 4",portStatus: "true"},
                  ];
                  return testData;
                }
              }
            }
          ] // Also you've missed this close bracket. 
        }
     }

这个房间属性应该这样写：

rooms: {
  type: Array,
  value: [
    {
      name: "Room1",
      maxPorts: 16,
      ports: [
        {portName: "Port 1",portStatus: "true"},
        {portName: "Port 2",portStatus: "true"},
        {portName: "Port 3",portStatus: "true"},
        {portName: "Port 4",portStatus: "true"},
      ]
    }
  ]
}

您的代码还有其他地方正在执行此操作，因此您也需要修复它们。

聚合物dom-repeat错误解析对象内的数组

1 个答案: