Angular 角度5展开/折叠列表

我使用材质列表控件显示嵌套对象。我用div创建了mat列表，但我想在这里添加扩展/折叠行选项，当我单击行时，它应该显示子类别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>

{{item.name}{{{item.description}}
{{subItem.name}。{{subItem.description}}

---

如何在div或mat列表控件上实现单击功能？

您可以使用组件，它非常简单

您可以将每个项目包装到mat扩展面板包装器中，如下所述：

看起来是这样的：

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

{{item.name}{{{item.description}}
{{subItem.name}。{{subItem.description}}

太好了，就是这样。谢谢第二个标签应该是结束标签：