では、現在選択されている行iron-data-tableをクリックすると、 ( ) オブジェクトが現在 (および以前に) 選択されている行を反映することを期待します。代わりに、 になります。selected-item{{selectedItem}}null
問題を再現する手順:
- この jsBinを開きます。
- 任意の行を選択します。
- 選択したオブジェクトがページの上部とコンソールに出力されることに注意してください。
- 別の行を選択します。
- 新しく選択された項目がページの上部とコンソールに表示されることに注意してください。
- コンソールをクリアします。(オプション。次のステップの結果を確認するのに役立ちます。)
- 現在選択されている行をクリックします。
- Notice
selected-item({{selectedItem}}) オブジェクトは現在nullです。
選択したオブジェクトが新しく選択された行 (以前に選択された行) になり、null にならないようにするにはどうすればよいですか?
http://jsbin.com/xucemijada/1/edit?html,コンソール,出力<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="iron-data-table/iron-data-table.html">
<link rel="import" href="iron-data-table/default-styles.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
</style>
[[_computeSelectedStr(selectedItem)]]
<iron-ajax
auto
url="https://saulis.github.io/iron-data-table/demo/users.json"
last-response="{{users}}"
>
</iron-ajax>
<iron-data-table id="grid"
selection-enabled
items="[[users.results]]"
selected-item="{{selectedItem}}"
>
<data-table-column name="Picture" width="50px" flex="0">
<template>
<img src="[[item.user.picture.thumbnail]]">
</template>
</data-table-column>
<data-table-column name="First Name">
<template>[[item.user.name.first]]</template>
</data-table-column>
<data-table-column name="Last Name">
<template>[[item.user.name.last]]</template>
</data-table-column>
<data-table-column name="Email">
<template>[[item.user.email]]</template>
</data-table-column>
</iron-data-table>
</template>
<script>
(function(){
'use strict';
Polymer({
is: 'x-foo',
observers: [
'_selectedItemChanged(selectedItem)' ,
],
_selectedItemChanged: function(ob) {
console.log('selectedItem', ob);
},
_computeSelectedStr: function(ob) {
return JSON.stringify(ob);
},
});
})();
</script>
</dom-module>
</body>
</html>