在 ngFor 中使用 mat-accordion 和 mat-expansion-panel

Question

我正在尝试使用 ngFor 循环一些项目，并为每个项目创建一个 mat-expansion-panel。

我想将每个项目的逻辑封装到一个项目组件中：

    <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>

这种方法的问题在于，我的组件在<mat-accordion>和之间有一个额外的 html 元素<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-content，但我认为这与我想要的相反，我不想将自定义内容推送到我的组件中，我想从我的组件中提取元素并将它们呈现在父级中。

我确实意识到我可以创建 2 个组件，item-header 和 item-content。但是，我真的很想将该登录名保留在一个组件中。

Answer 1

你就快到了。您不需要任何包装元素 - 您可以直接在组件上使用 *ngFor ：

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

使用简单的工作代码示例来工作 stack-blitz： https ://stackblitz.com/edit/angular-pvse7t

Answer 2

我遇到了同样的问题。在这个主题上打开了一个拉取请求，但从未合并。通过在下面添加此代码，我们可以稍微改进布局（边框半径）。为简单起见，我们能做的最好的事情是恢复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;
  ...
}

在 style.scss 中：

.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 3

从/sf/answers/2710131511/，尝试

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

将 ItemComponent 选择器设置为“[item]”