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

Question

我正在尝试用ngFor循环一些项目，并为每个项目创建一个垫子扩展面板。

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

    <item></item>

初始尝试：

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

其中item模板为：

    <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，但我认为这是对我想要的东西的倒退，我不想将自定义内容推到我的组件中，我想从我的组件中提取元素，并让它们呈现在父组件中。

我意识到我可以创建两个组件，item-header和item-content。然而，我真的希望将该登录信息保存在一个组件中。

Answer 1

我遇到了同样的问题。关于此主题的Pull Request is opened，但从未合并。我们可以通过添加下面的代码来改进布局(边框半径)。为了简单起见，我们能做的最好的事情就是在第一个和最后一个面板的顶部和底部恢复border-radius。

但是前一个面板的底部没有展开，下一个面板的顶部没有展开就更难了。

主component.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>

尝试将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>