Eu uso o controle de lista de materiais para mostrar objetos aninhados. Eu criei mat list com div, mas quero adicionar a opção Expandir / Recolher linha aqui e quando eu clicar na linha ela deve mostrar as subcategorias 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>
Como posso implementar a função de clique no controle div ou mat-list?
Você pode envolver cada item em um invólucro de painel de expansão de esteira conforme descrito lá: https://material.angular.io/components/expansion/overview
Será assim:
<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>
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras