在你的html文件中:
TITLE
BODY
TOGGLE
在您的TS文件中:
panelOpenState: boolean = false;
togglePanel() {
panelOpenState = !panelOpenState
}
如果使用* ngFor生成扩展面板:
{{ d.header }}
{{ d.content }}
TOGGLE
如果按下按钮,则所有展开的面板同时打开 .
要使用一个按钮只打开一个面板,请为每个元素添加一个“expanded”属性,如下所示:
data = [
{id:1, header:'HEADER 1', content:'CONTENT 1', expanded: false},
{id:2, header:'HEADER 2', content:'CONTENT 2', expanded: false},
{id:3, header:'HEADER 3', content:'CONTENT 3', expanded: false},
{id:4, header:'HEADER 4', content:'CONTENT 4', expanded: false},
]
然后在你的模板中:
[expanded]="d.expanded" *ngFor="let d of data" ngDefaultControl>
TOGGLE
{{ d.header }}
{{ d.content }}
按下按钮点击的方法:
toggle(expanded) {
expanded = !expanded;
}