Angular 9 應用程序錯誤：材料卡網格沒有響應

Question

我正在使用 Angular 9 開發聯系人應用程序。列表組件在卡片中顯示每個聯系人的一些信息和圖像。

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

卡片列表旨在響應（並且卡片應該 wrapp ），但事實並非如此。

事實上，瓷磚在所有分辨率下都充滿了。

我究竟做錯了什么？

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>

結果截圖：