[英]Angular 9 app bug: material cards grid is not responsive
我正在使用 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 ),但事实并非如此。
事实上,瓷砖在所有分辨率下都充满了。
我究竟做错了什么?
我通过这种方式获得了令人满意的结果:
在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>
结果截图:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.