Angular7 Material7 Grid Порядок / поток элементов списка не меняются с помощью flex-layout? - PullRequest
Новая
       46

Angular7 Material7 Grid Порядок / поток элементов списка не меняются с помощью flex-layout?

0 голосов
/ 02 ноября 2018

В моем html-файле есть компонент списка материалов material7, и мне просто не удается его изменить. У меня есть элементы, которые пронумерованы и отображаются в 2 столбцах, и выглядит странно, что они отображаются в виде строки против столбца.

Сначала у меня были некоторые проблемы, когда все плитки исчезали, но теперь, после обновления всего до материала 7, он выглядит точно так же.

Markup: 

 <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 запускать метрическую тонну ошибок.

1 Ответ

0 голосов
/ 24 ноября 2018

Я искал что-то, чтобы динамически переупорядочивать элементы списка сетки, но я думаю, что вам лучше всего восстановить их функциональность с вашим собственным классом div, а затем использовать flexLayout и fxFlexOrder в контейнерах div, чтобы изменить их положение с помощью использование размеров носителей или любой другой определяющий фактор.

Вот несколько примеров fxFlexOrder: https://tburleson -layouts-demos.firebaseapp.com / # / отзывчивым https://github.com/angular/flex-layout/wiki/fxFlexOrder-API

и вот несколько хороших примеров того, как реализовать динамическое изменение размера / применение порядка: https://stackblitz.com/edit/angular-responsive-material-grid-leocaseiro

...