Как мне создать мат-лайн с большим количеством блочного контента?

Question

Используя обычный flex-box, я бы сделал это:

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

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

Легко.

К сожалению, с 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 деления.

<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 и будет иметь правильный размер.