I can not display the elements of in my vaddin-grid

0

I'm using vaadin-grid, where I have to show a list that is stored in statusReservedList , but it does not show anything even though the results of the fix are in the console, some idea to see what the problem is, thanks .

<vaadin-grid theme="row-dividers" items="{{statusReservedList}}"  class="data-table-grid" column-reordering-allowed multi-sort height-by-rows>
                    <vaadin-grid-column width="5%">
                        <template class="header">
                            <vaadin-grid-sorter path="seat">[[localize('seat')]]</vaadin-grid-sorter>
                            <br/>
                            <vaadin-grid-filter path="seat"></vaadin-grid-filter>
                        </template>
                        <template>[[item.seat]]</template>
                    </vaadin-grid-column>

                    <vaadin-grid-column width="5%">
                        <template class="header">
                            <vaadin-grid-sorter path="floor">[[localize('floor')]]</vaadin-grid-sorter>
                            <br/>
                            <vaadin-grid-filter path="floor"></vaadin-grid-filter>
                        </template>
                        <template>[[item.floor]]</template>
                    </vaadin-grid-column>

                </vaadin-grid>

.... Method that loads those elements: .....

_loadingInformationSheet: function () {
                this._findRouteReservationSheetInformation(this.routeId, this.date).then(function (_reservationInfo) {
                    for (var i = 0; i < _reservationInfo.floorsNumber; i++) {

                        var floorId = "floor_" + i;
                        var rowsField = floorId + "_rows";
                        var columnsField = floorId + "_columns";
                        var totalItemsLength = _reservationInfo[rowsField] * _reservationInfo[columnsField];

                        for (var j = 0; j < totalItemsLength; j++) {
                            var itemId = floorId + "_item_" + (j < 10 ? "0" + j : j);
                            var itemObj = _reservationInfo[itemId];
                            if (itemObj) {
                                var statusReservedListTmp = { seat: "", floor: "", passenger: "", documentType: "", state: "" };
                                statusReservedListTmp.floor = itemObj.label;
                                statusReservedListTmp.passenger = itemObj.passengerName;
                                statusReservedListTmp.documentType = itemObj.documentType;
                                statusReservedListTmp.state = itemObj.state;
                                this.statusReservedList.push(statusReservedListTmp);                  

                            }
                        }
                    }

                }.bind(this));
            },

Output by console:

**

**{seat: "", floor: 3, passenger: "FERNANDEZ, LUIS", documentType: "CI", state: "UNAVAILABLE"}
4
:
{seat: "", floor: 4, passenger: " MARIANA, LEONARDO", documentType: "CI", state: "UNAVAILABLE"}
5
:
{seat: "", floor: 5, passenger: "HERBAS, luis", documentType: "CI", state: "UNAVAILABLE"}**

**

    
asked by Filomon Fernandez 02.08.2018 в 14:00
source

1 answer

0

try to notify the component. This within an asynchronous request therefore Polymer never knows that the variable and change with your data.

Check notifyPath and arrayMutations

NotifyPath: Polymer

ArrayMutations

It would be something like this:

         _loadingInformationSheet: function () {
            this._findRouteReservationSheetInformation(this.routeId, this.date).then(function (_reservationInfo) {
                for (var i = 0; i < _reservationInfo.floorsNumber; i++) {

                    var floorId = "floor_" + i;
                    var rowsField = floorId + "_rows";
                    var columnsField = floorId + "_columns";
                    var totalItemsLength = _reservationInfo[rowsField] * _reservationInfo[columnsField];

                    for (var j = 0; j < totalItemsLength; j++) {
                        var itemId = floorId + "_item_" + (j < 10 ? "0" + j : j);
                        var itemObj = _reservationInfo[itemId];
                        if (itemObj) {
                            var statusReservedListTmp = { seat: "", floor: "", passenger: "", documentType: "", state: "" };
                            statusReservedListTmp.floor = itemObj.label;
                            statusReservedListTmp.passenger = itemObj.passengerName;
                            statusReservedListTmp.documentType = itemObj.documentType;
                            statusReservedListTmp.state = itemObj.state;
                            this.push('statusReservedList', statusReservedListTmp);                  

                        }
                    }
                    this.notifyPath('statusReservedList', statusReservedList);
                }

            }.bind(this));
        }

With that it should work without fights.

Greetings.

    
answered by 13.08.2018 в 19:58