三跨内垫选项

Question

我需要显示如下的mat-options

我添加了三个跨度以覆盖它们，但它们似乎连接在一起。这是结果图像。

请帮助。

<mat-option *ngFor="let acc of fromAccounts.deposit" [value]="acc" >
                <span style="display: inline-block">{{acc.accountProductDesc}}</span>
                <span style="display: inline-block">{{acc.maskedAccountNumber}}</span>
                <span style="display: inline-block">{{acc.balance}}</span>
              </mat-option>

Answer 1

如果您只想更改<mat-option>内容的显示，则只需要熟悉scss。

当然，CSS解决方案几乎是无止境的，并且有很多方法可以实现您想要的目标，您只需要选择您的想法即可：

• 具有可伸缩性（如果需要）
• 正确实现您想要的东西
• 易于理解/阅读/调试

这是我建议的一种简单方法：

模板：

<mat-option *ngFor="let acc of fromAccounts.deposit" [value]="acc" >
  <div class="account-details">
    <span class="description">{{acc?.accountProductDesc}}</span>
    <span class="number">{{acc?.maskedAccountNumber}}</span>
    <span class="balance">{{acc?.balance | currency}}</span>
  </div>
</mat-option>

SCSS：

.account-details{
  display: flex;
  *{
    padding: 0 3px;
  }
}
.description{
  font-weight: bold;
}
.number{
  font-size: small
}
.balance{
  margin-left: auto;
}