Использование mat-accordion и mat-extension-panel в ngFor

Question

Я пытаюсь l oop некоторых элементов с помощью ngFor и создать панель расширения матов для каждого элемента.

Я хотел бы заключить логические элементы c для каждого элемента в элемент компонент:

    <item></item>

Начальная попытка:

<mat-accordion>
  <div *ngFor="let item of items" >
    <item [item]="item"></item>
  </div>
</mat-accordion>

Где шаблон элемента:

    <mat-expansion-panel>
      <mat-expansion-panel-header>
        Header Content
      </mat-expansion-panel-header>

      <div>
         Expandable content
      </div>
    </mat-expansion-panel>

Проблема этого подхода заключается в том, что существует дополнительный html элемент для моего компонента между <mat-accordion> и <mat-expansion-panel>, который портит css для аккордеона.

Есть ли способ, которым мой компонент может обеспечить заголовок и контент?

    <mat-accordion>
      <div *ngFor="let item of items" >
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              <!-- put item component header here->
            </mat-expansion-panel-header>

          <div>
            <!-- put item component content here->
          </div>
        </mat-expansion-panel>
      </div>
    </mat-accordion>

Я прочитал о ng-контенте, но я думаю, что это наоборот от того, что я хочу, я не хочу вставлять пользовательский контент в свой компонент, я хочу извлечь элементы из своего компонента и сделать так, чтобы они отображались в родитель.

Я понимаю, что мог бы создать 2 компонента, item-header и item-content. Однако я действительно хотел бы сохранить этот логин в одном компоненте.

Answer 1

Я столкнулся с той же проблемой. Запрос извлечения открыт по этой теме, но никогда не объединяется. Мы можем немного улучшить макет (радиус границы), добавив этот код ниже. Для простоты лучше всего восстановить border-radius сверху и снизу первой и последней панели.

Но это сложнее, если нижняя часть предыдущей панели не расширена, а верхняя часть следующей панели не развернута. ...

основной компонент. html:

<mat-accordion class="custom-accordion">
  <item *ngFor="let item of items" [item]="item"></item>
</mat-accordion>

item.component.ts:

@Component({
  selector: 'app-item',
  template: `
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        Header Content
      </mat-expansion-panel-header>
      <div>
        Expandable content
      </div>
    </mat-expansion-panel>
  `,
  host: {
    'class': 'expansion-panel-wrapper',
    '[class.expanded]': 'expansionPanel && expansionPanel.expanded',
  }
})
export class ItemComponent {
  @ViewChild(MatExpansionPanel, { static: false }) expansionPanel;
  ...
}

в стилях.s css:

.custom-accordion.mat-accordion {
  .expansion-panel-wrapper:first-of-type .mat-expansion-panel {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }

  & > :not(.expanded) .mat-expansion-panel {
    border-radius: 0;
  }

  & > .expansion-panel-wrapper:last-of-type > .mat-expansion-panel {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}

Answer 2

Вы были почти там. Вам не нужно иметь обертывающий элемент - вы можете просто использовать * ngFor непосредственно для вашего компонента:

<mat-accordion>
    <item *ngFor="let item of items" [item]="item"></item>
</mat-accordion>

Рабочий стек-блиц с простым примером рабочего кода: https://stackblitz.com/edit/angular-pvse7t

Answer 3

Почему бы не применить ngFor непосредственно к панели расширения?

<mat-accordion>
  <mat-expansion-panel *ngFor="let item of items">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Header Content
      </mat-panel-title>
    </mat-expansion-panel-header>
    <ng-template matExpansionPanelContent>
      Expandable Content
    </ng-template>
  </mat-expansion-panel>
</mat-accordion>

Я пытался поделиться ссылкой из Stackblitz, но, к сожалению, похоже, что у нас есть ошибка с общим доступом, поэтому я собираюсь поделиться скриншотом того, что я имею в виду:

Редактировать: кажется, Stackblitz решил сотрудничать сейчас. Вот ссылка: https://stackblitz.com/edit/angular-ae7cfr

Answer 4

Глядя на код, я думаю, что ваша проблема заключается в следующем:

<mat-accordion>
  <div *ngFor="let item of items" > **//this right here creates a 'div' element for each loop**
    <item [item]="item"></item>
  </div>
</mat-accordion>

Попробуйте вместо этого заменить div на ng-container:

<mat-accordion>
  <ng-container *ngFor="let item of items" > **//ng-container is never rendered in the DOM**
    <item [item]="item"></item>
  </ng-container>
</mat-accordion>

Answer 5

С { ссылка }, попробуйте

<mat-accordion>
  <ng-container *ngFor="let item of items" >
    <mat-expansion-panel item  [item]="item"></mat-expansion-panel>
  </ng-container>
</mat-accordion>

С помощью селектора ItemComponent в качестве '[item]'