在较小的屏幕尺寸上使用 md-grid-list 时出错

Question

我正在构建一个显示产品网格列表的移动网站。

为了实现网格列表，我使用了 angular material 的 md-grid-list 指令。

这是我实现上述功能的代码部分：

<div id="products-row" infinite-scroll="fetchNextPage(nextCategory,1)" infinite-scroll-disabled="busy">
    <md-grid-list md-cols-gt-md="3" md-cols-md="2" md-cols-sm="1" md-gutter="5px" md-row-height="2:1">
         <md-grid-tile ng-repeat="p in productsOfCurrentCat">
             <product data="p" id="product-item"></product>
         </md-grid-tile>
        <div ng-show="busy">Loading more products....</div>
    </md-grid-list>
</div>

这在较大的屏幕尺寸上效果很好。当我使用 Google Chrome 的切换设备模式在较小的屏幕尺寸上查看网页时，出现以下错误：

md-grid-list: md-cols attribute was not found, or contained a non-numeric value

并且，它无限向节点服务器发送请求。

我试图 google 解决，但没有足够的帮助。在此论坛上的任何帮助将不胜感激。

Answer 1

好吧，错误告诉您缺少 md-cols 适合您所选设备的断点。

如果您查看布局断点介绍 here and the grid-list demo here，您会发现，您缺少 md-cols-xs="1" 属性。 sm不是最小断点。

在较小的屏幕尺寸上使用 md-grid-list 时出错

Error using md-grid-list on smaller screen size

angularjs

angular-material