当再次选择当前选定的项时，所选铁数据表选中的项将抛出“null”。
当再次选择当前选定的项时，所选铁数据表选中的项将抛出“null”。
提问于 2016-08-01 20:26:40
在iron-data-table中，当我单击任何当前选定的行时，我希望selected-item ({{selectedItem}})对象反映当前(和以前)选定的行；但是，它变成了null。
重新创建问题的步骤：
- 打开这个jsBin。
- 选择任何行。
- 注意，选定的对象打印到页面顶部和控制台。
- 选择另一行。
- 注意，新选择的项目打印到页面顶部和控制台。
- 清除控制台。(可选。将帮助您查看下一步的结果。)
- 单击当前选定的行。
- 注意，
selected-item({{selectedItem}})对象现在是null。
如何纠正这一点，使所选对象是新选定的行(这是以前选定的行)而不是null？
http://jsbin.com/xucemijada/1/edit?html,console,output
<!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>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-08-02 06:10:44
当第二次单击一行时，项目将被取消选中，而在null中使用selectedItem来反映这一点。类似地，在多选择模式下，当没有选择任何内容时，selectedItems是空的。
因为v1.0.1 <iron-data-table>会触发deselecting-item事件，可以用来防止取消选举。
table.addEventListener('deselecting-item', function(e) { e.preventDefault(); });
我更新了您的JSBin，以演示如何使用此事件：http://jsbin.com/dubuyoy/edit?html,console,output
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38707525
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号