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

Question

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

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

    <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> 和<mat-expansion-panel> 之间有一个额外的html 元素，这会弄乱手风琴的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

我遇到了同样的问题。关于这个主题的Pull Request is opened，但从未合并。 通过在下面添加这段代码，我们可以稍微改进一下布局（边界半径）。为简单起见，我们能做的最好的事情是在第一个和最后一个面板的顶部和底部恢复 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;
  ...
}

在styles.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 2

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

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

使用简单的工作代码示例进行堆栈闪电战： https://stackblitz.com/edit/angular-pvse7t

Answer 3

通过查看代码，我认为您的问题来自于此：

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

尝试用 ng-container 替换 div：

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

来自https://stackoverflow.com/a/38716164/11928194，试试看

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

使用 ItemComponent 选择器作为 '[item]'

Answer 5

为什么不直接将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