如果我在后端设置项目并创建聚合物模板，则不会显示 Vaadin-flow Grid 的数据

Question

我在后端加载网格数据并在聚合物模板中创建列时遇到问题。列数正确，但不会显示任何数据。我真的会使用排序和过滤功能的 vaadin-grid-column 特性。我错过了什么吗？我用 vaadin 12 和 13 试过了。我也用 Spring-boot 2.1.0.RELEASE

OrderListView.kt

@Tag("orderlist-view")
@HtmlImport("src/views/orders/orderlist-view.html")
@Route(CommanderConst.PAGE_ORDERS, layout = MainView::class)
class OrderListView(
        var orderGridDataProvider: OrderGridDataProvider
) : PolymerTemplate<TemplateModel>(), BeforeEnterObserver {

    @Id("orderGrid")
    private lateinit var orderGrid: Grid<OrderDTO>

    override fun beforeEnter(event: BeforeEnterEvent?) {
        orderGrid.dataProvider = orderGridDataProvider
    }
}

订单列表-view.html：

<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../../../bower_components/vaadin-grid/vaadin-grid-column.html">
<link rel="import" href="../../../bower_components/vaadin-grid/vaadin-grid-filter.html">
<link rel="import" href="order-card.html">
<dom-module id="orderlist-view">
    <template>
        <vaadin-grid id="orderGrid" theme="no-row-borders" data-provider='{{myOrders}}'>
            <vaadin-grid-column>
                <template class="header">#</template>
                <template>[[index]]</template>
            </vaadin-grid-column>
            <vaadin-grid-column>
                <template class="header">id</template>
                <template>[[item.id]]</template>
            </vaadin-grid-column>
        </vaadin-grid>
    </template>
    <script>
        class OrderListView extends Polymer.Element {
            static get is() {
                return 'orderlist-view';
            }
            static get properties() {return {
               myOrders:{
                 type:Array
                 observer: '_myOrders'
               }
            }}

            _myOrders(o) {console.log(o);}

        }
        window.customElements.define(OrderListView.is, OrderListView);
    </script>
</dom-module>

然后看起来像这样

但如果我使用 TemplateRenderer 并在其中仅使用一些 div，则会显示数据：

 orderGrid.addColumn(TemplateRenderer.of<OrderDTO>(
                "<order-show"
                        + "  header='[[item.header]]'"
                        + "  order='[[item.order]]'>"
                        + "</order-show>")!!
                .withProperty("order") { order -> order }
                .withProperty("header") { order -> order.id }
        )

顺序-show.html:

<dom-module id="order-show">
    <template>
        <div>
            <span>[[header]]</span>
        </div>
        <div>
            <h3>[[order.id]]</h3>
            <template is="dom-repeat" items="[[order.orderItems]]">
                <div>
                    <span>[[item.quantity]]</span>
                </div>
            </template>
        </div>
    </template>

    <script>
        class OrderCard extends Polymer.Element {
            static get is() {
                return 'order-show';
            }
        }

        window.customElements.define(OrderCard.is, OrderCard);
    </script>
</dom-module>

Answer 1

仅设置数据提供者是不够的，您还需要让服务器端的Grid组件知道服务器端数据的哪些部分真正发送给客户端。如您所见，您为添加为列的模板渲染器配置的任何属性都将被发布。 Grid 中还有一个专门的方法可以用来发布项目数据而无需创建任何列：addValueProvider.

在你的例子中，你可以添加这样的东西（表示为 Java 因为我的 Kotlin 不是很流利）：

orderGrid.addValueProvider("header", order -> order.getId());

如果我在后端设置项目并创建聚合物模板，则不会显示 Vaadin-flow Grid 的数据

No data shown for Vaadin-flow Grid if I set the Items in backend and create a polymer-template

vaadin

polymer

vaadin-grid

vaadin-flow