使用包含两列的 Angular 列表

Question

如何在左右两列文本中使用 angular lists？

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>

但 none 似乎有效。

如何在不使用网格列表的情况下实现此目的？

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>

使用包含两列的 Angular 列表

Using Angular list with two columns

angular

mat-list