如何使用 Angular 并排添加 2 个 Title 元素？答案

【问题标题】：How can I add 2 Title elements side by side using Angular?如何使用 Angular 并排添加 2 个 Title 元素？
【发布时间】：2021-08-03 21:35:57
【问题描述】：

在我的项目中，我使用的是<mat-expansion-panel>。我正在尝试使用<mat-panel-title> 与他们的respective description 并排添加2 title element

目前我的代码显示

Title1 Title2 Description1 Description2

我要找的是

Title1 Description1 Title2 Description2

这是我的代码 - 链接 - https://stackblitz.com/edit/mat-expansion-panel-q1qxz7?file=app%2Fexpansion-overview-example.html

<mat-nav-list>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Title 1 </mat-panel-title>
      <mat-panel-description>
        <dd class="col-sm-10 record_property_value" data-property-type="select">{{ 'Description fror Title 1'}}</dd>
      </mat-panel-description>
      <mat-panel-title>
        Title 2
      </mat-panel-title>
      <mat-panel-description>
        <dd class="col-sm-10 record_property_value" data-property-type="select">{{ 'Description fror Title 2'}}</dd>
      </mat-panel-description>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
</mat-nav-list>

【问题讨论】：

单个面板标题可能只有 1 个mat-panel-title 和 1 个mat-panel-description。为什么需要一个带有双标题及其描述的面板？
要求在main element 上同时显示Title 1 和Title 2 及其description。截至目前，当expansion panel 是opened 时，我正在显示Title 2 and its description。出于readability 的目的，试图在main component 上同时显示data。还有其他方法可以使这成为可能吗？谢谢
这只是为了玩，将它们包装在 2 个 div 中 Div1 = title1+desc1 和 Div2=title2+desc2。如果您有一些特殊要求，您应该考虑实现自定义标头

标签： html angular angular-material titlebar mat-expansion-panel

【解决方案1】：

根据 Angular 材料文档，mat-expansion-panel-header 应该有一个 <mat-panel-title> 和一个 <mat-panel-description> 以正确定位面板内容。但是在您的情况下，您可以尝试这种方法...

我在这里编辑了您的stackblitz，它似乎正在工作。请验证..

【讨论】：