Angular 9 个应用错误：material 卡片网格没有响应

Question

我正在使用 Angular9 开发联系人应用程序。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>

卡片列表旨在响应（并且卡片应该包装），但它不是。

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

我做错了什么？

Answer 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>

结果截图：

Angular 9 个应用错误：material 卡片网格没有响应

Angular 9 app bug: material cards grid is not responsive

javascript

angular-material

responsive

angular