javascript - Angular Js，数据表列和行在刷新时移动

Question

在 Angular Js 项目中，使用 Google Material Design 的数据表有时会移位构建列和行。

目前我不知道如何完美地重现该错误。所以要重现它，我只需刷新网络浏览器并查看，刷新并查看，刷新并查看...

你知道这里发生了什么吗？谢谢。

有错误： 没有错误：

您可以在下面找到 HTML 代码：

<md-card>
    <md-toolbar class="md-table-toolbar md-default" ng-show="!filter.search && !selectedProducts.length">
        <div class="md-toolbar-tools">
            <md-button class="md-raised md-accent" style="color:#fff;" disabled>
                <span translate>New</span>
            </md-button>
            <div flex></div>
            <md-button class="md-icon-button" ng-click="filter.search = true;">
                <md-icon class="material-icons">search</md-icon>
                <md-tooltip>
                    <span translate>Search</span>
                </md-tooltip>
            </md-button>
            <md-button class="md-icon-button" ng-click="load()">
                <md-icon class="material-icons">refresh</md-icon>
                <md-tooltip>
                    <span translate>Refresh</span>
                </md-tooltip>
            </md-button>
        </div>
    </md-toolbar>
    <md-toolbar class="md-table-toolbar md-default" ng-show="filter.search && !selectedProducts.length">
        <div class="md-toolbar-tools">
            <md-icon>search</md-icon>
            <form flex>
                <input type="text" name="search" ng-model="search" placeholder="{{ 'Search...' | translate }}">
            </form>
            <md-button class="md-icon-button" ng-click="filter.search = false" aria-label="close">
                <md-icon class="material-icons">close</md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <md-toolbar class="md-table-toolbar md-accent md-hue-1" ng-show="selectedProducts.length">
        <div class="md-toolbar-tools">
            <div translate translate-n="selectedProducts.length" translate-plural="{{$count}} selected">1 selected</div>
        </div>
    </md-toolbar>
    <md-table-container>
        <table md-table md-progress="promise" md-row-select ng-model="selectedProducts" multiple>
            <thead md-head md-order="query.order">
                <tr md-row>
                    <th md-column md-order-by="identifier"><span translate>Product ID</span></th>
                    <th md-column md-order-by="name"><span translate>Name</span></th>
                    <th md-column md-order-by="manufacturer"><span translate>Manufacturer</span></th>
                    <th md-column md-order-by="lastModified" ><span translate>Last modified</span></th>
                </tr>
            </thead>
            <tbody md-body> 
                <tr md-row md-select="product" md-select-id="product._id" data-ng-repeat="product in products.data | filter:search | limitTo: query.limit: (query.page - 1) * query.limit | orderBy: query.order" ng-click="read(product._id)">
                    <td md-cell>[{{product.upiType}}] {{product.identifier}}</td>
                    <td md-cell>{{product.name}}</td>
                    <td md-cell>{{product.manufacturer}}</td>
                    <td md-cell>{{product.lastModified | date:'dd/MM/yyyy'}}</td>
                </tr>
            </tbody>
        </table>
    </md-table-container>
    <md-table-pagination md-limit="query.limit" md-limit-options="[10, 15, 50, 100]" md-page="query.page" md-total="{{products.count}}" 
                         md-page-select md-label="$parent.label">
    </md-table-pagination>
</md-card>

标签： javascripthtmlangularjsnode.jsangular-material