Как я могу заставить мои рендереры vaadin возвращать мои функции рендеринга должным образом?

Я использую lit-element и vaadin grid, и я пытаюсь использовать функции рендерера, чтобы возвращать данные в соответствующий столбец vaadin. Однако при попытке вернуть метод render () он отображает данные в столбце сетки vaadin как [объект объекта].

firstUpdated() {
    super.firstUpdated();

    fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200')
      .then(r => r.json())
      .then(data => {
        this.users = data.result;
      });
  }

  render() {
    return html`
      <style>
        .address {
          white-space: normal;
        }

        vaadin-grid-filter {
          display: flex;
        }

        vaadin-text-field {
          max-width: 100%;
        }
      </style>

      <vaadin-grid .items="${this.users}" .rowDetailsRenderer="${this.rowDetailsRenderer}" column-reordering-allowed multi-sort>
        <vaadin-grid-column width="50px" flex-grow="0" header="#" .renderer="${this.indexRenderer}" resizable></vaadin-grid-column>
        <vaadin-grid-filter-column path="firstName" header="First name"></vaadin-grid-filter-column>
        <vaadin-grid-sort-column path="lastName" header="Last name"></vaadin-grid-sort-column>
        <vaadin-grid-column width="150px" header="Repitch" .renderer="${this.buttonRenderer}"></vaadin-grid-column>
        <vaadin-grid-column width="150px" path="email" .headerRenderer="${this.emailHeaderRenderer}"></vaadin-grid-column>

      </vaadin-grid>
    `;
  }

  buttonRenderer(root, column, rowData) {
    render(
      html`
        <button>Test</button>
      `, 
      root
    );
  }

  indexRenderer(root, column, rowData) {
    render(
      html`
        <div>${rowData.index}</div>
      `, 
      root
    );
  }

Я ожидаю отобразить $ {rowData.index} в первом столбце сетки vaadin, но в пользовательском интерфейсе отображается значение [объект объекта. Я могу показать данные, полученные из выборки, поскольку я могу показать их в столбцах, которые не используют функции рендеринга (имя и фамилия). Любая помощь будет оценена!


person veloRace    schedule 09.08.2019    source источник
comment
это полимер?   -  person G.aziz    schedule 09.08.2019
comment
да, lit-element - часть нового полимерного зонта   -  person veloRace    schedule 09.08.2019
comment
Я не понимаю, почему у вас проблемы. Ваш пример работает: stackblitz.com/edit/grid-renderers?file=index. ts Все, что я сделал, это добавил свойство users. (Кстати, super.firstUpdated () не требуется, но это не вызывает проблем.)   -  person Thad    schedule 11.08.2019
comment
Обычно рекомендуется вызывать супер-методы, даже если они в данный момент ничего не делают.   -  person Peter Burns    schedule 30.09.2019


Ответы (1)


Цитата из комментария Тада:

Я не понимаю, почему у вас проблемы. Ваш пример работает: http://stackblitz.com/edit/grid-renderers?file=index.ts - все, что я сделал, это добавил свойство users.

person Community    schedule 30.09.2019