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>

Список карт должен быть отзывчивым (и карты должны обернуться ), но это не так.

На самом деле, плитки заполнены при всех разрешениях.

Что я делаю не так?

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>

Результат снимок экрана: