0

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

订单列表视图.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 }
        )

订单显示.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>

使用模板渲染器显示的数据

4

1 回答 1

3

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

在您的示例中，您可以添加类似这样的内容（表示为 Java，因为我的 Kotlin 不是很流利）：

orderGrid.addValueProvider("header", order -> order.getId());
于 2019-03-15T12:42:43.587 回答