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
    }
}

orderlist-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 }
        )

order-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。

在您的示例中，您可以添加以下内容（由于我的Kotlin不太流利，因此用Java表示）：

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

如果我在后端设置Items并创建一个聚合物模板，则Vaadin-flow Grid不会显示任何数据

1 个答案: