Question

我使用材质列表控件来显示嵌套对象。我用div创建了mat列表，但是我想在这里添加Expand / Collapse Row选项，当我点击行时它应该显示subategories 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

您可以使用Expansion组件，它非常直接

Answer 2

您可以将每个项目包装到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>

Angular 5展开/折叠列表

2 个答案: