Angular 5展开/折叠列表

Question

我使用物料清单控件显示嵌套对象。我用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>

如何在div或mat-list控件上实现click功能？

Answer 1

您可以按照以下说明将每个项目包装到mat-expansion-panel包装器中：https : //material.angular.io/components/expansion/overview

它看起来像这样：

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