typescript Angular 5 展开/折叠列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48687758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 5 Expand/Collapse list
提问by redux17
I use material list control for showing nested objects. I created mat list with div but I want add Expand/Collapse Row option here and when I click on row it should show subcategories div ?
我使用材质列表控件来显示嵌套对象。我用 div 创建了垫子列表，但我想在这里添加展开/折叠行选项，当我点击行时，它应该显示子类别 div ？
<mat-list>
<div *ngFor="let item of chaptersItems">
<mat-list-item>
<a style="cursor: pointer;">
<h4 mat-line>{{item.name}} {{item.description}}</h4>
</a>
</mat-list-item>
<mat-list style="margin-left:30px;">
<div *ngFor="let subItem of item.subChapters">
<mat-list-item>
<a style="cursor: pointer;">
<p mat-line> {{subItem.name}}. {{subItem.description}}</p>
</a>
</mat-list-item>
</div>
</mat-list>
</div>
</mat-list>
How can I implement click function on div or mat-list control ?
如何在 div 或 mat-list 控件上实现点击功能？
回答by SlovyanskiyYehor
You can wrap each item into mat-expansion-panel wrapper as described there: https://material.angular.io/components/expansion/overview
您可以按照此处所述将每个项目包装到 mat-expansion-panel 包装器中：https: //material.angular.io/components/expansion/overview
It will looks like that:
它看起来像这样：
<mat-list>
<div *ngFor="let item of chaptersItems">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-list-item>
<a style="cursor: pointer;">
<h4 mat-line>{{item.name}} {{item.description}}</h4>
</a>
</mat-list-item>
<mat-expansion-panel-header>
<mat-list style="margin-left:30px;">
<div *ngFor="let subItem of item.subChapters">
<mat-list-item>
<a style="cursor: pointer;">
<p mat-line> {{subItem.name}}. {{subItem.description}}</p>
</a>
</mat-list-item>
</div>
</mat-list>
</mat-expansion-panel>
</div>
</mat-list>
