используя угловую гибкую компоновку со списком угловых материалов - PullRequest
Новая
       5

используя угловую гибкую компоновку со списком угловых материалов

0 голосов
/ 24 мая 2018

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

Я пытался использовать оба для сбора, но когда я связываю [fxLayout] [fxLayout.xs] с функцией, чтобыполучить состояние устройства, когда я минимизирую размер окна [fxLayout.xs], который не запускается динамически при сворачивании окна.

было бы здорово, если бы кто-то мог решить эту проблему, заранее спасибо 

export class TopicsComponent {
topics = [
      { title: 'Example', colspan: 2, colspanalt: 7, rowspan: 1, color: '#ffa726', font: '#607d8b', order: '1' }
]

 updateLayout(layout) {
    if (layout === 'fxLayout') {
     this.layoutDesktop = true;
      this.layoutMobile = false;
      return ('column');
    } else if (layout === 'fxLayoutXs') {
      this.layoutMobile = true;
      this.layoutDesktop = false;
      return ('column');
    }
  }
  updateColspan(topic) {
    if (this.layoutDesktop === false ) {
      return (topic.colspan);
    } else if ( this.layoutMobile === true) {
      return (topic.colspanalt);
    }
  }
}

<mat-card [fxLayout]="updateLayout('fxLayout')" [fxLayout.xs]="updateLayout('fxLayoutXs')" fxLayoutGap="8px" fxLayoutAlign="start stretch">
      <mat-grid-list [cols]="7" rowHeight="1:1" gutterSize="8px">
        <mat-grid-tile *ngFor="let topic of topics" [style.background]="topic.color" [style.color]="topic.font"
        [rowspan]="topic.rowspan" [colspan]="updateColspan(topic)">{{topic.title}}</mat-grid-tile>
      </mat-grid-list>
    </mat-card>
...