Использование списка Angular с двумя столбцами

Question

Как я могу использовать угловые списки с двумя столбцами текста слева и справа?

Базовый пример, показанный на сайте angular, следующий:

<mat-list>
 <mat-list-item> Pepper </mat-list-item>
 <mat-list-item> Salt </mat-list-item>
 <mat-list-item> Paprika </mat-list-item>
</mat-list>

Я хочу разбить текст в каждом <mat-list-item> для отображения в двух столбцах (с выравниванием по левому и правому краю)

Я попробовал несколько способов, в том числе:

<mat-list>
    <mat-list-item>
         <p style="float:left">Left Text</p>
         <p style="float:right">Right Text</p>
    </mat-list-item>
    <mat-list-item>
         <p style="float:left">Left Text</p>
         <p style="float:right">Right Text</p>
    </mat-list-item>
</mat-list>

но, похоже, никто не работает.

Как я могу добиться этого без использования списков сетки?

Answer 1

Вам придется использовать matLineв вашем коде, чтобы заставить его работать. Попробуйте вот так, это сработает.

<mat-list>
    <mat-list-item >
      <div matLine>
         <p style="float:left">Left Text</p>
         <p style="float:right">Right Text</p>
        </div>
    </mat-list-item>
    <mat-list-item>
       <div matLine>
         <p style="float:left">Left Text</p>
         <p style="float:right">Right Text</p>
       </div>
    </mat-list-item>
</mat-list>

Answer 2

Вы можете добиться этого, используя mat-grid-list. Например,

<mat-grid-list cols="2">
  <mat-grid-tile>
    <mat-list>
      <mat-list-item> Pepper </mat-list-item>
      <mat-list-item> Salt </mat-list-item>
    </mat-list>
  </mat-grid-tile>
  <mat-grid-tile>
    <mat-list>
      <mat-list-item> Pepper </mat-list-item>
      <mat-list-item> Salt </mat-list-item>
    </mat-list>
  </mat-grid-tile>
</mat-grid-list>

Если вам это кажется сложным, вы можете легко использовать базовый bootstrap gridsдля разделения на две колонки. Например,

<div class="row">
 <div class="col col-6>
   // You can put your left items here
 </div>
 <div class="col col-6>
  // You can put your right items here
 </div>
</div>