Столбцы динамического списка угловых материалов на основе точек останова - PullRequest
Новая
       27

Столбцы динамического списка угловых материалов на основе точек останова

0 голосов
/ 26 сентября 2018

На моем экране отображаются 3 карты, карты 1 и 2 расположены рядом, а карта 3 занимает всю ширину.

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

Component.html 

 <mat-grid-list cols="4">
      <mat-grid-tile *ngFor="let card of cardsData" [colspan]="card.cols" [rowspan]="card.rows">
        <mat-card >
          <mat-card-header>
            {{ card.title }}
          </mat-card-header>
          <mat-card-content>
          </mat-card-content>
          <mat-card-footer>
            <a href="">VIEW MORE</a>
          </mat-card-footer>
        </mat-card>
      </mat-grid-tile>
    </mat-grid-list>

Component.ts 

export class Component implements OnInit {
  public cardsData;
  ngOnInit() {
              this.cardsData = [
        { title: 'Card 1', cols: 2, rows: 1, item: 'Card 1' },
        { title: 'Card 2', cols: 2, rows: 1, item: 'Card 2' },
        { title: 'Card 3', cols: 4, rows: 1, item: 'Card 3' }
    ];
  }
}
...