Question

angular-material提供了不错的网格列表和布局但缺少flex布局以采用不同的设备，另一方面角度flex布局为不同的设备提供更好的灵活视图管理但缺点是我们无法告诉flex布局有多少列和行每个列表项可以占用的空间，为了将列表项带到下一行，我们必须将它保存在单独的容器中。

我已经尝试过使用两者来收集但是当我将[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>

使用角度材料网格列表

0 个答案: