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

Question

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

并排添加 2 title element

目前我的代码显示

Title1 Title2 Description1 Description2

我要找的是

Title1 Description1 Title2 Description2

这是我的代码 - Link - 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>

Answer 1

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

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

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

How can I add 2 Title elements side by side using Angular?

html

angular

angular-material

titlebar

mat-expansion-panel