是否可以在 <mat-list-item> 中使用 fxLayoutAlign？

Question

我正在使用 angular material 编写 Web 应用程序，我想要一个显示消息的列表和向您发送详细信息的按钮。我尝试使用 fxLayoutAlign 并使用 align-content: space-between 这样我就可以在右侧有按钮，在左侧有消息，但它似乎不起作用，这让我发疯。

<mat-list style="margin-top: 40px">

    <mat-divider></mat-divider>

    <mat-list-item>
      <span>MESSAGE</span>
      <button mat-icon-button color="primary"><mat-icon>keyboard_arrow_right</mat-icon></button>
    </mat-list-item>
</mat-list>

Answer 1

Angular Material 在 mat-list-item 和您的编译内容之间添加元素，因此添加 fxLayoutAlign 不会影响您的内容，因为它不再是直接子项。你可以试试：

<mat-list-item>
  <span fxFlex>MESSAGE</span>
  <button mat-icon-button color="primary"><mat-icon>keyboard_arrow_right</mat-icon></button>
</mat-list-item>

或者如果您不希望您的消息跨越大部分框：

<mat-list-item>
  <span>MESSAGE</span>
  <span fxFlex></span>
  <button mat-icon-button color="primary"><mat-icon>keyboard_arrow_right</mat-icon></button>
</mat-list-item>