代码之家 › 专栏 › 技术社区 › bulbasurmsr

当我试图在对象中显示数组时,dom repeat返回me“无法读取未定义的属性'apply'”

polymer-1.0 polymer

bulbasurmsr · 技术社区 · 7 年前

在使用dom时,我在浏览器控制台中收到此错误重复:

无法读取未定义的属性“apply”

当我尝试在dom repeat中显示对象内部的数组时,

代码是:

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="hola-mundo">
    <style>
        h1{
            color: blue;
        }
    </style>

    <template>

        <button on-tap="test">myButton</button>             

        <template is="dom-repeat" items="{{myObject.parameters}}">
                <div>{{item.name}}</div>                
        </template>
    </template>
</dom-module>

<script>
    Polymer({
        is: "hola-mundo",
        properties: {
            myObject: {
                type:Object,
                value: {
                    parameters: {
                        type: Array,
                        value: []
                    },
                    color: {
                        type: String,
                        value: 'red'
                    }   
                }
            }

        },

        test: function(){
            this.push('myObject.parameters', { 'id': '1', 'name': 'test'});
        },      
    });
</script>

数组必须在对象内

有人能纠正我的密码吗?我很感谢你的帮助。

谢谢

更新1:

在这个stackoverflow问题中,一个响应被选择为有效,但对我不起作用:

Polymer dom-repeat error parsing the array inside the object

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="hola-mundo">
    <style>
        h1{
            color: blue;
        }
    </style>

    <template>

        <button on-tap="test">myButton</button>     
        <h1>Hola Mundo <span>{{nombre}}</span></h1>

        <template is="dom-repeat" items="{{rooms.ports}}">
                <div>{{item.portName}}</div>                
        </template>

    </template>
</dom-module>

<script>
    Polymer({
        is: "hola-mundo",
        properties: {
            rooms: {
                type: Array,
                value: [
                    {
                        name: "Room1",
                        maxPorts: 16,
                        ports: {
                            type: Array,
                            value: [

                            {portName: "Port 1",portStatus: "true"},
                            {portName: "Port 2",portStatus: "true"},
                            {portName: "Port 3",portStatus: "true"},
                            {portName: "Port 4",portStatus: "true"},
                            ]
                        }
                    }
                ]
            },

        },

        test: function(){
            this.push('rooms.ports', {portName: "Port 4",portStatus: "true"});
        },      
    });
</script>

1 回复 | 直到 7 年前

Umbo 7 年前

这是:

properties: {
  myObject: {
    type: Object,
    value: {
      parameters: {
        type: Array,
        value: []
      },
      color: {
        type: String,
        value: 'red'
      } 
    }
  } 
}

不起作用,因为你想“定义” parameters 和 color 就好像它们是财产一样 myObject 的值),但实际上您正在指定对象文本

{
  parameters: {
    type: Array,
    value: []
  },
  color: {
    type: String,
    value: 'red'
  } 
}

作为价值 我的对象 财产。所以 myObject.parameters 在这种情况下 Object 而不是 Array 因此 this.push 失败。

通过定义尝试 我的对象 这种方式:

properties: {
  myObject: { // Define properties at this level only
    type: Object,
    value: {
      parameters: [], // Parameters is initially an empty array
      color: 'red',
    }
  } 
}