无法在角度2和角度材料中看到md-card的完整内容

Question

我在列表中尝试md-card但是当我显示卡片的内容时，它只显示标题和子标题。我的HTML代码看起来像

<md-nav-list>
  <md-list-item *ngFor="let contact of contacts" fxLayout="column">
    <md-card class="card-class">
      <md-card-header>
        <div md-card-avatar class="sample-image"></div>
        <md-card-title>{{contact.name}}</md-card-title>
        <md-card-subtitle>{{contact.email}}</md-card-subtitle>
      </md-card-header>
      <img md-card-image="../assets/image.jpg">
      <md-card-content>
        <p>Address: {{contact.address}}</p>
        <p>Phone Number: {{contact.phoneNumber}}</p>
      </md-card-content>
      <md-card-actions>
        <button md-button>EDIT</button>
      </md-card-actions>
    </md-card>
  </md-list-item>
</md-nav-list>

关联的css是

.card-class{
  width: 600px;
}

.sample-image{
  background-image: url('../../assets/image.jpg');
  background-size: cover;
}

当我试图加载它是切割卡的内容，我希望卡取全宽并显示所有内容。

列表末尾的

显示了所有内容。

Answer 1

这是一个css问题，您需要覆盖类mat-list-item-content并将高度修改为您需要的大小。

.mat-list-item-content{
    height:180px;
 }