md-list-icon或md-button对齐？(角度材料2)

Question

任何方式如何使按钮/图标/复选框与材料1中的右侧对齐:

https://material.angularjs.org/latest/demo/list

我目前(材料2)有:

<md-list>
  <md-list-item *ngFor="let position of cart">
    <h3 md-line> {{ position.name }} </h3>
    <p md-line>
      <span> Line 1 </span>
    </p>
    <md-icon md-list-icon>delete</md-icon>
  </md-list-item>
</md-list>

Answer 1

对于上面描述的内容,解决方案非常简单,只需mat-list-icon在选择器中省略,Material就可以实现:

<mat-list>
  <mat-list-item *ngFor="let position of cart">
    <h3 mat-line> {{ position.name }} </h3>
    <p mat-line>
      <span> Line 1 </span>
    </p>
    <div> $2.00 </div>
    <button mat-icon-button (click)="remove(1)">
      <mat-icon class="mat-24">delete</mat-icon>
    </button>
  </mat-list-item>
</mat-list>

Answer 2

对于那些想知道 2023 年的人：Angular 15 为此提供了一个特定指令，MatListItemMeta.

例子

<mat-list>
  <mat-list-item *ngFor="let position of cart">
    <h3 matListItemTitle> {{ position.name }} </h3>
    <p matListItemLine>Line 1</p>
    <button matListItemMeta mat-icon-button (click)="remove(1)">
      <mat-icon class="mat-24">delete</mat-icon>
    </button>
  </mat-list-item>
</mat-list>

Answer 3

实际上，mat-list 使用了 flex box。您可以使用 CSS 属性“order”单独订购商品。只需为订单使用足够大的数字

md-icon[md-list-icon]{
  order: 10;
}

<md-list>
  <md-list-item *ngFor="let position of cart">
    <h3 md-line> {{ position.name }} </h3>
    <p md-line>
      <span> Line 1 </span>
    </p>
    <md-icon md-list-icon>delete</md-icon>
  </md-list-item>
</md-list>