我试图用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,但我认为这与我想要的有所不同,我不想将自定义内容硬塞到我的组件中,我想从我的组件中提取元素并在父组件中呈现它们。
我确实意识到我可以创建两个组件,项目标题和项目内容。然而,我真的希望将该登录保存在一个组件中。
我遇到了同样的问题。在此主题上打开了一个拉请求,但从未合并。通过添加下面的代码,我们可以稍微改善一下布局(边框半径)。为了简单起见,我们能做的最好的事情是恢复第一个和最后一个面板顶部和底部的< 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>