angular - 如何在 mat-panel 中对齐多个描述

Question

我试图让描述在我的垫板上看起来更加一致。如果一个字段比另一个字段长，它会将所有内容都推到右侧。如何使描述保持一致？

<mat-accordion>
  <mat-expansion-panel [expanded]="allExpandState">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Account #: {{accountNumber}}
      </mat-panel-title>
      <mat-panel-description>
        {{type}}
      </mat-panel-description>
      <mat-panel-description>
        {{date}}
      </mat-panel-description>
      <mat-panel-description>
        {{value}}
      </mat-panel-description>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
  <!-- ... -->
</mat-accordion>

现在的样子：

标签： angularangular-materialangular6

Answer 1

您可以只创建一个 mat-panel-description 并在其中创建一个表格来对齐您的值。

<mat-accordion>
  <mat-expansion-panel [expanded]="allExpandState">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Account #: {{accountNumber}}
      </mat-panel-title>
      <mat-panel-description>
        <table>
          <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
          </tr>
          <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
          </tr>
          <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
          </tr>
        </table>
      </mat-panel-description>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
  <!-- ... -->
</mat-accordion>