Как обновить текстовый элемент после изменения свойства в Polymer 3? - PullRequest
Новая
       42

Как обновить текстовый элемент после изменения свойства в Polymer 3?

1 голос
/ 29 мая 2019

Итак, я использую таблицу данных, в которой есть активный элемент.Когда этот активный элемент изменяется, я сохраняю имя активного элемента в свойстве моего полимерного элемента.Затем я отображаю это свойство String в div.Теперь я точно знаю, что изменение свойства работает, потому что я 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 также отображает обновление свойства.

Ответы [ 2 ]

2 голосов
/ 30 мая 2019

Ваша сфера неверна.Вы используете анонимную функцию, поэтому, когда вы пытаетесь установить 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));
2 голосов
/ 30 мая 2019

Обратный вызов 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', ...);
})
...