2

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

4

1 回答 1

0

我一直在寻找可以动态重新排序网格列表项的方法，但我认为最好的办法是使用自己的 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

于 2018-11-24T03:51:30.753 回答