所以我正在使用一个具有活动元素的数据表。当活动元素更改时,我将活动元素的名称存储在我的聚合物元素的属性中。然后,我在div中显示此String属性。 现在,我确定可以更改属性,因为在更改后我将console.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);
});
}
}
我的预期结果是,每次currentProject属性更新时,显示该属性的div也将更新。
答案 0 :(得分:2)
active-item-changed
回调未将其上下文绑定到Polymer实例(即this
是网格而不是Polymer组件)。代替函数表达式,使用arrow function自动将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', ...);
})
答案 1 :(得分:1)
您的范围是错误的。您正在使用匿名函数,因此当您尝试设置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));