Question

我正在使用卡片在角度2材质网格列表中遇到问题。

我想在网格列表中显示卡片，但它没有响应

Here is the code:

<md-grid-list cols="4">
  <md-grid-tile *ngFor="let card of cards">
    <md-card>
      <img md-card-image src="{{card.image}}">
      <md-card-content>
        {{card.content}}
      </md-card-content>
    </md-card>
  </md-grid-tile>
</md-grid-list>

Answer 1

我没有评论的声誉所以我会把它写成答案 - 抱歉。

在想要响应式视图时，您必须小心设置固定宽度。尝试删除视图的宽度，看看会发生什么。最好用flex设置你的宽度。此外，如果您使用的是材料设计，他们建议将fxFlex与其设计一起用作布局here下的公关文档 - 链接到fxFlex

Answer 2

在component.ts文件中使用以下代码

ngOnInit() {
        this.event1 = this.event2 = this.event3 = new EventListComponent();
        this.columns =
          (window.innerWidth <= 400) ? 1
            : (window.innerWidth <= 600) ? 2
            : (window.innerWidth <= 800) ? 3 : 4;
      }
      onResize(event) {
        this.columns =
          (window.innerWidth <= 400) ? 1
            : (window.innerWidth <= 600) ? 2
            : (window.innerWidth <= 800) ? 3 : 4;
      }

，并在HTML文件中使用“列”变量。喜欢

<mat-grid-list
[cols]="columns"

(window:resize)="onResize($event)">

Answer 3

尝试更改此

<md-grid-list cols="4">

要

<md-grid-list cols="4" rowHeight="500px" gutterSize="10px">

角度2材料网格列表与卡

3 个答案: