提问者:小点点

在ngFor中使用垫子手风琴和垫子扩展面板


我试图用ngFor循环一些项目,并为每个项目创建一个垫子扩展面板。

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

    <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>
      <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,但我认为这与我想要的有所不同,我不想将自定义内容硬塞到我的组件中,我想从我的组件中提取元素并在父组件中呈现它们。

我确实意识到我可以创建两个组件,项目标题和项目内容。然而,我真的希望将该登录保存在一个组件中。


共3个答案

匿名用户

我遇到了同样的问题。在此主题上打开了一个拉请求,但从未合并。通过添加下面的代码,我们可以稍微改善一下布局(边框半径)。为了简单起见,我们能做的最好的事情是恢复第一个和最后一个面板顶部和底部的< code>border-radius

但是上一个面板的底部没有展开,下一个面板的顶部没有展开会更困难…

主component.html:

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

项目.组件. 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.scs中:

.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;
  }
}

匿名用户

你几乎就在那里。您不需要任何包装元素-您可以直接在您的组件上使用*ngFor:

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

带有简单工作代码示例的工作栈-blitz:https://stackblitz.com/edit/angular-pvse7t

匿名用户

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

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