动态添加mat-expansion面板可以通过以下步骤实现:
import { MatExpansionModule } from '@angular/material/expansion';
@NgModule({
imports: [
MatExpansionModule
]
})
<mat-accordion>
<mat-expansion-panel *ngFor="let item of items">
<mat-expansion-panel-header>
<mat-panel-title>
{{ item.title }}
</mat-panel-title>
</mat-expansion-panel-header>
<p>{{ item.content }}</p>
</mat-expansion-panel>
</mat-accordion>
在上面的代码中,我们使用ngFor指令遍历名为items的数组,并为每个数组项生成一个mat-expansion-panel。你可以根据自己的需求修改数组的内容和结构。
export class YourComponent implements OnInit {
items: any[];
ngOnInit() {
this.items = [
{ title: 'Panel 1', content: 'Content 1' },
{ title: 'Panel 2', content: 'Content 2' },
{ title: 'Panel 3', content: 'Content 3' }
];
}
}
在上面的代码中,我们定义了一个名为items的数组,并在ngOnInit生命周期钩子中为其赋值。你可以根据自己的需求修改数组的内容和结构。
通过以上步骤,你就可以动态添加mat-expansion面板了。每个面板的标题和内容可以根据你的数据进行动态渲染。如果需要添加更多面板,只需在items数组中添加相应的数据即可。
腾讯云相关产品和产品介绍链接地址:
高校公开课
企业创新在线学堂
云+社区沙龙online第6期[开源之道]
云+社区开发者大会(北京站)
云+社区技术沙龙 [第30期]
云+社区技术沙龙[第25期]
云+社区开发者大会(杭州站)
高校公开课
晞和讲堂
停课不停学第四期
原引擎 | 场景实战系列
领取专属 10元无门槛券
手把手带您无忧上云