Question

我的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的变更检测生命周期引发了公吨的错误。

Answer 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

Angular7 Material7 Grid列表项的顺序/流程是否随flex-layout改变？

1 个答案: