所以我使用了一个具有活动元素的数据表。当活性元素发生变化时,我将活性元素的名称存储在聚合物元素的属性中。然后我在div 中显示这个字符串属性。现在我确定属性更改有效,因为我控制台.log更改后,显示属性的div 不会更新并不断显示我设置的默认值。
export class ProjectsOverview extends PolymerElement {
static get template() {
return html`
...
<div>{{currentProject}}</div>
...
`
}
static get properties() {
return {
currentProject: {
type: String,
value: "placeholder",
notify: true,
reflectToAttribute: true
}
};
}
connectedCallback() {
super.connectedCallback();
const grid = this.shadowRoot.querySelector('vaadin-grid');
grid.addEventListener('active-item-changed', function(event) {
const item = event.detail.value;
grid.selectedItems = [item];
if (item) {
this.set('currentProject', item.name);
} else {
this.set('currentProject', '');
}
console.log(this.currentProject);
});
}
}
我的预期结果是,每次更新当前项目属性时,显示属性的div 也会更新。
active-item-changed
回调没有将其上下文绑定到 Polymer 实例(即,this
是网格而不是 Polymer 组件(。使用箭头函数自动将this
绑定到正确的上下文,而不是函数表达式。
// grid.addEventListener('active-item-changed', function(event) { // DON'T DO THIS
grid.addEventListener('active-item-changed', (event) => {
/* this is the Polymer instance here */
this.set('currentProject', ...);
})
你的范围是错误的。您正在使用匿名函数,因此当您尝试设置currentProject
时,当您的this
是匿名函数时,您会这样做。使用.bind(this)
来解决您的问题。
grid.addEventListener('active-item-changed', function(event) {
const item = event.detail.value;
grid.selectedItems = [item];
if (item) {
this.set('currentProject', item.name);
} else {
this.set('currentProject', '');
}
console.log(this.currentProject);
}.bind(this));