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

Question

我正在研究角材料应用。我有一个页面，我需要列出语言数量。我正在使用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>

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

Answer 1

尝试将ng-cloack作为＆＃34; md-grid-list＆＃34;的一个属性。

  <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>

Answer 2

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

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

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