如何使用 Angular 并排添加 2 个标题元素？

如何解决如何使用 Angular 并排添加 2 个标题元素？

在我的项目中，我使用了 <mat-expansion-panel>。我正在尝试使用 2 title element 与他们的 <mat-panel-title>

并排添加 respective description

目前我的代码显示

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>

解决方法

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

我在此处编辑了您的 stackblitz，它似乎有效。请验证..