Angular Material md-grid-list 在页面刷新时重叠答案

【问题标题】：Angular Material md-grid-list overlaps on page refreshAngular Material md-grid-list 在页面刷新时重叠
【发布时间】：2016-12-27 05:19:22
【问题描述】：

我正在开发一个角度材料应用程序。我有一个页面，我需要列出语言的数量。我正在使用 md-grid-list 而不是传统的 ul 和 li。但是，当页面加载/刷新时，列表会在几分之一秒内重叠，然后才能正确显示。

代码

  <md-grid-list md-cols-md="3" md-cols-lg="3" md-cols-sm="3" md-cols-xs="2" md-row-height-gt-sm="6:1" md-row-height="7:1" md-gutter="33px">
      <md-grid-tile ng-repeat="language in vm.languages" class="language">
          <a data-ng-click="vm.changeLanguage(language.key)"><span ng-bind="language.language | humanize"></span></a>
      </md-grid-tile>
  </md-grid-list>

如果有人可以为此分享解决方案，那就太好了。

【问题讨论】：

标签： angularjs html css material-design angular-material

【解决方案1】：

尝试将 ng-cloack 作为“md-grid-list”的属性。

  <md-grid-list md-cols-md="3" md-cols-lg="3" md-cols-sm="3" md-cols-xs="2" md-row-height-gt-sm="6:1" md-row-height="7:1" md-gutter="33px">
      <md-grid-tile ng-repeat="language in vm.languages" class="language">
          <a data-ng-click="vm.changeLanguage(language.key)"><span ng-bind="language.language | humanize"></span></a>
      </md-grid-tile>
  </md-grid-list>

【讨论】：

【解决方案2】：

您加载 css、js 依赖项的顺序可能会导致此问题。

如果您可以将您的材质库依赖项移近页面的初始加载，它可能会解决此问题。您可以通过将 jquery 和材料库放在您的 html 头中作为您要加载的第一个依赖项之一来测试这一点。这些对您的应用程序是全局的或仅在您的组件上的依赖项也可能导致这种情况发生。同样，您可以使用前面提到的方法对其进行测试。

我还通过在我的 html 周围的 div 容器包装器中使用 *ngIf 自然地解决了这个问题，这似乎允许在显示任何内容之前加载站点的依赖项。不过，我仍然会尝试重新安排我的依赖项。

【讨论】：