Angular 9 应用程序错误：材料卡网格没有响应答案

【问题标题】：Angular 9 app bug: material cards grid is not responsiveAngular 9 应用程序错误：材料卡网格没有响应
【发布时间】：2020-08-17 08:21:37
【问题描述】：

我正在使用 Angular 9 开发联系人应用程序。list 组件在卡片中显示每个联系人的一些信息和图像。

在app\components\list\list.component.ts 我有：

import { Component, OnInit, VERSION, ViewChild } from '@angular/core';
import { from } from 'rxjs';
import { ContactsListService } from '../../services/contacts-list.service';
import { Contact } from '../../models/Contact';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
})

export class ListComponent implements OnInit {

  contactsList:Contact[];

  ngVersion: string = VERSION.full;
  matVersion: string = '5.1.0';
  columns: number;

  constructor(private ContactsListService:ContactsListService) { }

   // Cards
   breakPoints() {
    switch(true) {
        case (window.innerWidth <= 480):
          this.columns = 1;
          break;
        case (window.innerWidth > 480 && window.innerWidth <= 992):
          this.columns = 4;
          break;
        default:
          this.columns = 6;
      }
    }

  ngOnInit(): void  {
    // Contact list
    this.ContactsListService.getContcts().subscribe(
      contactsList => { this.contactsList = contactsList },
      error => { }
    );

    this.breakPoints();

  }

  onResize(event) {
    this.breakPoints();
  }

}

在app\components\list\list.component.html 我有：

<mat-grid-list [cols]="columns" rowHeight="300px" (window:resize)="onResize($event)">
    <mat-grid-tile *ngFor="let contact of contactsList">
        <mat-card>
                <mat-card-header>
                    <img mat-card-avatar src="{{contact.picture.thumbnail}}">
                    <mat-card-title>{{contact.name.first}} {{contact.name.last}}</mat-card-title>
                    <mat-card-subtitle>From {{contact.location.city}}</mat-card-subtitle>
                </mat-card-header>
                        <img mat-card-image src="{{contact.picture.medium}}" alt="{{contact.name.first}} {{contact.name.last}}">
                <mat-card-content>
                        <h3>{{contact.location.city}}, {{contact.location.country}}</h3>
                </mat-card-content>
                    <mat-card-actions>
                        <button mat-button> CONTACT </button>
                    </mat-card-actions>
        </mat-card>
    </mat-grid-tile>
</mat-grid-list>

卡片列表旨在响应（并且卡片应该包装），但事实并非如此。

事实上，在所有分辨率下，图块都充满了。

我做错了什么？

【问题讨论】：

我认为你没有做错任何事。 mat-card 遵循材料设计规范，它要求在页眉、页脚、边距、填充等上以非响应方式具有一些固定间距。因此，如果卡片及其所有部分（标题、副标题、图像、页脚、字体大小以及最小距离）不适合该空间，它将超出容器的限制。如果您需要不同的行为，您可以构建自己的响应式卡片布局，完全包含在mat-card-content 中。或者您需要覆盖一些材料规格。
@julianobrasil 检查this answer.
是的，他固定了瓷砖的行高。 :)

标签： javascript angular angular-material responsive

【解决方案1】：

我通过这种方式获得了令人满意的结果：

在app\components\list\list.component.ts 我有：

import { Component, OnInit, VERSION, ViewChild } from '@angular/core';
import { from } from 'rxjs';
import { ContactsListService } from '../../services/contacts-list.service';
import { Contact } from '../../models/Contact';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
})

export class ListComponent implements OnInit {

  contactsList:Contact[];

  ngVersion: string = VERSION.full;
  matVersion: string = '5.1.0';
  columns: number;

  constructor(private ContactsListService:ContactsListService) { }

   // Cards
   breakPoints() {
    switch(true) {
        case (window.innerWidth <= 480):
          this.columns = 1;
          break;
        case (window.innerWidth > 480 && window.innerWidth <= 640):
          this.columns = 2;
          break;
        case (window.innerWidth > 640 && window.innerWidth <= 992):
          this.columns = 3;
          break;
        default:
          this.columns = 5;
      }
    }

  ngOnInit(): void  {
    // Contact list
    this.ContactsListService.getContcts().subscribe(
      contactsList => { this.contactsList = contactsList },
      error => { }
    );
    this.breakPoints();
  }

  onResize(event) {
    this.breakPoints();
  }
}

在app\components\list\list.component.html 我有：

<mat-grid-list [cols]="columns" rowHeight="500px" style="padding:10px" [gutterSize]="'10px'" (window:resize)="onResize($event)">
    <mat-grid-tile fxFlexAlign="stretch" *ngFor="let contact of contactsList">
        <mat-card style="width: 100%; height: 90%">
                <mat-card-header>
                    <img mat-card-avatar src="{{contact.picture.thumbnail}}">
                    <mat-card-title>{{contact.name.first}} {{contact.name.last}}</mat-card-title>
                    <mat-card-subtitle>From {{contact.location.city}}</mat-card-subtitle>
                </mat-card-header>
                        <img mat-card-image src="{{contact.picture.large}}" alt="{{contact.name.first}} {{contact.name.last}}">
                <mat-card-content>
                        <h3>{{contact.location.city}}, {{contact.location.country}}</h3>
                </mat-card-content>
                    <mat-card-actions>
                        <button mat-button color="primary"> CONTACT </button>
                    </mat-card-actions>
        </mat-card>
    </mat-grid-tile>
</mat-grid-list>

结果截图：

【讨论】：