Polymer 1.x: iron-data-table не загружает данные и стили заголовков при первом рендеринге внутри neon-animated-pages

На скриншоте ниже показано, как мой iron-data-table элемент выглядит при первой загрузке. Обратите внимание, что данные отсутствуют, а заголовки отформатированы не полностью (кажется, что ширина слишком мала для отображения меток заголовков столбцов).

Однако, если я введу символ в поля фильтра или нажму одну из кнопок сортировки, iron-data-table кажется, перерисовать себя, и это выглядит хорошо. Столбцы и заголовки отображаются правильно, а данные заполняют таблицу, как и ожидалось.

Эта проблема началась, когда я добавил несколько каталогов в мою файловую структуру iron-data-table внутри neon-animated-pages, Я дважды проверил, и все мои импорта загружаются правильно. Но я подозреваю, что каким-то образом происходит небольшая задержка при получении данных, и каким-то образом таблица может пытаться выполнить рендеринг до того, как данные поступят, и не обновляется после того, как данные поступают.

Поэтому я попытался добавить следующую функцию. Но безрезультатно. Здесь нет render() метод для iron-data-table,

<iron-data-table id="grid" ...

....

attached: function() {
  this.async(function() {
    this.$$('#grid').render();
  }.bind(this), 500);
},

Что может быть причиной такого поведения? И что я должен попробовать дальше?

редактировать

Этот планк демонстрирует желаемое iron-data-table поведение

Этот план демонстрирует мое проблемное поведение. (Еще не закончено. В настоящее время в процессе.)

Конфигурация примерно такая.

Родитель-el.html 
<neon-animated-pages>
  ...
  <container-el...>...</container-el>
</neon-animated-pages>
Контейнер-el.html 
<child-el ...>...</child-el>
ребенок-el.html 
<iron-data-table ...></iron-data-table>

Редактировать 2

Основываясь на комментарии @SauliTähkäpää, я безуспешно пытался исправить следующее.

Родитель-el.html 
<neon-animated-pages id="animator" ...>
  ...
  <container-el...>...</container-el>
</neon-animated-pages>

...

attached: function() {
  this.async(function() {
    this.$.animator.notifyResize();
  }.bind(this), 50);
},
Источник

2 ответа

Решение

Не знаком с neon-animated-pages но, глядя на документы, он должен вызвать notifyResize() на выбранных страницах, если они распространяются iron-resizable-behavior,

Поэтому я думаю, что вы можете либо убедиться, <container-element> и другие элементы в дереве расширяются iron-resizable-behavior ИЛИ переопределить resizerShouldNotify уведомить сетку напрямую. См. Больше здесь: https://elements.polymer-project.org/elements/neon-animation?active=neon-animated-pages

Источник

Чтобы объяснить для тех, кто следует за этим вопросом позже...

Согласно принятому ответу @SauliTähkäpää, я успешно добавил следующий код в каждый элемент цепочки (т. Е. Начиная с элемента, содержащего neon-animated-pages и заканчивается элементом, содержащим iron-data-table - в этом примере это было бы parent-el, container-el, а также child-el).

parent-el.html, container-el.html, child-el.html.
<link rel="import" href="path/to/bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
...
behaviors: [
  Polymer.IronResizableBehavior,
],
Источник
Другие вопросы по тегам