Неправильное размещение мат-карты при использовании гибкой раскладки - PullRequest
Новая
       36

Неправильное размещение мат-карты при использовании гибкой раскладки

0 голосов
/ 05 мая 2020

вот что получилось с картинки

HTML

<div  fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="10px" ngClass.gt-xs="ml-10">
    <div  *ngFor = "let course of course">
        <app-course-card [course]="course"></app-course-card>
    </div>
</div>

Мат-карта составляющая 

<div fxFlex="50" fxFlex.sm="0 1 calc(50%-10px)" fxFlex.md="0 1 calc(33%-10px)" fxFlex.gt-md="0 1 calc(25%-10px)">
    <mat-card class='card'  appMaterialElevation>
      <mat-card-title>Card 1</mat-card-title>
      <img mat-card-image src="../../../assets/langpageBg1.png" class="image">
      <mat-card-content>Coach : {{course.firstName}} {{course.lastName}}</mat-card-content>
      <mat-card-actions >
        <button mat-flat-button color="primary" class="matbutton">Detail</button>
      </mat-card-actions>
    </mat-card>

</div>

main.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-course-page',
  templateUrl: './course-page.component.html',
  styleUrls: ['./course-page.component.scss']
})
export class CoursePageComponent implements OnInit {
  defaultElevation = 2;
  raisedElevation = 8;
  constructor() { }

  ngOnInit() {
  }

  course: any[] = [
    {
      firstName : 'a',
      lastName : "b",
    },
    {
      firstName : 'a',
      lastName : "b",
    },
    {
      firstName : 'a',
      lastName : "b",
    },
    {
      firstName : 'a',
      lastName : "b",
    },
    {
      firstName : 'a',
      lastName : "b",
    },

  ]
}

mat-card.ts 

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-course-card',
  templateUrl: './course-card.component.html',
  styleUrenter image description herels: ['./course-card.component.scss']
})
export class CourseCardComponent implements OnInit {
  @Input() course: any;
  constructor() { }

  ngOnInit() {
  }

}

я хочу, чтобы карту можно было выровнять в направлении столбца и можно было настраивать динамически, когда мы настраиваем размер окна ， но, судя по коду, карты выровнены только по прямой линии слева. Я хочу знать, могу ли я как-нибудь изменить свой код, чтобы мат-карта могла динамически выравниваться в окне

...