如何创建包含大量块内容的mat-line？

Question

使用普通的弹性盒我会这样做：

＆＃13;

＆＃13;

.container {
 border: solid 1px black; 
 width: 30em; 
 
 display: flex; 
 flex-flow: row nowrap; 
 
 align-items: center; 
}

.icon {
 width: 5em;
 height: 5em; 
 
 background-color: #fdd; 
}

.button {
 width: 5em; 
 height: 5em;
 background-color: #dfd; 
}

.content {
 flex: 1 0 auto; 
}

p {
 border: solid 1px #aaa; 
 margin: 2px; 
}

＆＃13;

<div class = "container"> 

<div class ="icon"></div> 

<div class ="content">
<p> 1 </p> 
<p> 2 </p>
<p> 3 </p> 
<p> 4 </p> 
<p> 5 </p>
<p> 6 </p> 
</div> 

<div class ="button"></button>

</div> 

＆＃13;

＆＃13;

＆＃13;

易。

不幸的是，对于Angular的mat-list-item和mat-line，它似乎并不像mat-line那样包含这样的内容。这是我正在尝试的内容：

<mat-list-item >

  <img mat-list-avatar [src]="property.photos[0]"/> 

  <div mat-line>
      <p> 1 </p> 
      <p> 2 </p>
      <p> 3 </p> 
      <p> 4 </p> 
      <p> 5 </p>
      <p> 6 </p> 
   </div>

  <button mat-icon-button> 
      <mat-icon aria-label="Edit Property">edit</mat-icon>
  </button>

</mat-list-item>

我收到了大量内容。

它看起来像是因为angular为列表项指定了固定的高度。

有没有办法使用角度材料框架来完成这项工作？

我尝试这样做的原因是因为mat-line中的内容实际上是另一个呈现的组件。

Answer 1

好吧，一个愚蠢而又有效的黑客，就是放入三个空mat-line个div。

<mat-list-item >

  <img mat-list-avatar [src]="property.photos[0]"/> 
  <div mat-line/>
  <div mat-line/> 
  <div mat-line/> 

  <div mat-line>
      <p> 1 </p> 
      <p> 2 </p>
      <p> 3 </p> 
      <p> 4 </p> 
      <p> 5 </p>
      <p> 6 </p> 
   </div>

  <button mat-icon-button> 
      <mat-icon aria-label="Edit Property">edit</mat-icon>
  </button>

</mat-list-item>

这会将mat-list-item样式更改为height:auto，并且会正确调整大小。