Question

我很抱歉这个标题不清楚

问题
我有一个数据对象，其中包含一个联系人数组，其中包含多个对象。不幸的是，我无法访问嵌套对象的值。

找到类似问题的答案here解释了如何在JavaScript中访问它。 response.data.contacts[1].value但是，使用Polymer只打印代码而不是检索值。我相信问题来自我在绑定中使用的方括号。 {{response.data.contacts[1].value}}

下面我添加了我的数据，以澄清具有数组的对象内的对象值的含义，因为这有点令人困惑。我想只访问contacts数组中的值而不是迭代所有这些值

{
  "data": {
    "contacts": [
     {
      "id": 259,
      "user_id": 248,
      "type": "phone",
      "value": "+1 (946) 315-2819",
      "created_at": "2016-08-24 18:12:30",
      "updated_at": "2016-10-24 13:03:33",
      "deleted_at": null
     },
     {
      "id": 260,
      "user_id": 248,
      "type": "phone",
      "value": "+1-979-427-7971",
      "created_at": "2015-12-08 04:10:19",
      "updated_at": "2016-10-24 13:03:33",
      "deleted_at": null
     },
    ]
  },
}

Answer 1

要bind to a subproperty of an array item，请使用array item path，如下所示：

{{response.data.contacts.1.value}}

HTMLImports.whenReady(() => {
  "use strict";

  Polymer({
    is: 'x-foo',
    properties: {
      response: {
        type: Object,
        value: () => ({
          "data": {
            "contacts": [{
              "id": 259,
              "user_id": 248,
              "type": "phone",
              "value": "+1 (946) 315-2819",
              "created_at": "2016-08-24 18:12:30",
              "updated_at": "2016-10-24 13:03:33",
              "deleted_at": null
            }, {
              "id": 260,
              "user_id": 248,
              "type": "phone",
              "value": "+1-979-427-7971",
              "created_at": "2015-12-08 04:10:19",
              "updated_at": "2016-10-24 13:03:33",
              "deleted_at": null
            }, ]
          },
        })
      }
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <span>{{response.data.contacts.1.value}}</span>
    </template>
  </dom-module>
</body>

codepen

访问嵌套在具有Polymer的Object中的Array中的Object值

1 个答案: