Angular Material Grid List 项目顺序/流程不随 flex-layout 改变？答案

【问题标题】：Angular7 Material7 Grid List item order/flow not changing with flex-layout?Angular Material Grid List 项目顺序/流程不随 flex-layout 改变？
【发布时间】：2019-04-06 05:53:43
【问题描述】：

我的 html 中有一个 material7 网格列表组件，但我似乎无法改变它的流程。我有编号显示在 2 列中的项目，它们作为行与列流动看起来很奇怪。

一开始我遇到了一些问题，所有瓷砖都消失了，但现在将所有东西升级到 Material 7 后，它看起来完全一样。

标记：

 <div id="lvl1row">
          <mat-grid-list  rowHeight="45"  #grid  gutterSize="0px">
        <div class="list-group" *ngFor="let button of lvl1">
            <mat-grid-tile  [fxFlexOrder]="itemOrder(theItemOrder)">
          <!-- LVL 1 Buttons  -->
          <button id="lvl1buttons" class="item"  mat-raised-button color="accent" (click)="reveallvl2(button['md:0/413349530_Level 0 – Section'], button['md:0/413349601_Level 1 – Series Header'])">
            <fa-icon icon="folder"></fa-icon> {{ button['md:0/413349601_Level 1 – Series Header'] | lvl1clean }}
          </button>
        </mat-grid-tile>
        </div>
      </mat-grid-list>
      </div>

我也尝试让这个函数像这样改变所有其他项目的顺序：

  theItemOrder = 0

  itemOrder(param) {
    this.theItemOrder++
    if((param%2) == 0){  console.log(this.theItemOrder); return this.theItemOrder + 1} else {  console.log(this.theItemOrder); return this.theItemOrder}
  }

它有点工作，但也使 Angular 的变更检测生命周期引发了大量错误。

【问题讨论】：

MatGridList 根据其 cols 值和 MatGridTiles 的 colspan 和 rowspan 值进行布局。它不使用弹性布局。您的代码在网格内创建多个 DIV，每个 DIV 中都有一个网格图块。您为图块指定的顺序无关紧要，因为其父 flex-layout 容器中只有一个图块。您应该尝试的方法是操纵平铺“按钮”对象的数组顺序，而不是尝试强制网格进入不同的布局。
@G.Tranter 谢谢——我一直在上面尝试这个，但到目前为止没有成功。我已经玩得更多了，但现在我再次感到不走运，无法以任何有意义的有效方式对其进行修改。
如果可能，请在 stackblitz 上创建一个小演示

标签： angular angular-material angular-flex-layout angular7 angular-material-7

【解决方案1】：

我一直在寻找可以动态重新排序网格列表项的方法，但我认为最好的办法是使用自己的 div 类重新创建它们的功能，然后在 div 容器上使用 flexLayout 和 fxFlexOrder 来更改它们的位置使用媒体尺寸或任何您的决定因素。

以下是 fxFlexOrder 的一些示例： https://tburleson-layouts-demos.firebaseapp.com/#/responsive https://github.com/angular/flex-layout/wiki/fxFlexOrder-API

这里有一些很好的例子来说明如何实现排序的动态大小/应用： https://stackblitz.com/edit/angular-responsive-material-grid-leocaseiro

【讨论】：