dom-repeat возвращает мне "Не удается прочитать свойство 'apply' of undefined", когда я пытаюсь отобразить массив внутри объекта - PullRequest
0 голосов
/ 06 июня 2018

Я получаю эту ошибку в консоли браузера при использовании dom-repeat:

Невозможно прочитать свойство '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 ответ выбран как действительный, но он не работает для меня:

Ошибка повторения dom-полимера при разборе массива внутри объекта

<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 Ответ

0 голосов
/ 07 июня 2018

Это:

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.Таким образом, myObject.parameters в данном случае является Object вместо Array, поэтому this.push завершается неудачей.

Попробуйте определить myObject следующим образом:

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