Как я могу добавить 2 элемента заголовка рядом с помощью Angular?

Question

В своем проекте я использую <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>

Answer 1

Согласно документации по материалам Angular, mat-expansion-panel-header должен иметь один <mat-panel-title> и <mat-panel-description>для правильного позиционирования содержимого панели. Но в вашем случае вы можете попробовать этот метод ...

Я редактировал ваш stackblitz здесь, и, похоже, он работает. Пожалуйста, подтвердите..