无法在角度2和角度材质中看到md卡的全部内容

我试图在列表中显示md卡，但是当显示卡的内容时，它只显示标题和子标题。我的HTML代码看起来像无法在角度2和角度材质中看到md卡的全部内容

<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; 
}

当我试图加载它被切割卡上的内容，我想卡充分的宽度和显示的一切。

在列表它显示一切的结束。

来源

2017-08-29 Ashish

你有没有尝试在你的标题和内容元素父项上放置'display：flex'？如果这不起作用，请尝试降级到较旧的材料'“@ angular/material”：“2.0.0-beta.1”'，根据我的经验，最新的材料库有点混乱。 – masterpreenz

只需要我2美分，为什么你需要把卡片放入md-nav-list？为什么不用'fxLayout =“列”''和'md-card'内的'* ngFor'就有一个父div？ –

@AndreiMatracaru谢谢。我是新来的材料，所以我不知道。 – Ashish

这是你需要覆盖类垫列表项的内容和修改高度，你需要的大小的CSS问题。

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

来源

2017-08-31 06:22:32 godie

无法在角度2和角度材质中看到md卡的全部内容

回答

相关问题