Remplacer les lignes étendues spécifiques par des détails dans Clarity Datagrid

Question

J'utilise la grille de données de clarté et j'essaie d'utiliser la fonctionnalité mentionnée ici: https://vmware.github.io/clarity/documentation/datagrid/expandable-rows. Je souhaite utiliser l'entrée clrDgReplace pour remplacer la ligne par le détail lorsque la ligne est développée, mais je souhaite le faire uniquement pour quelques lignes (pas toutes les lignes). Comment puis-je obtenir ce comportement?

Voici mon code DataGrid:

<clr-datagrid> 
    <clr-dg-column>User ID</clr-dg-column> 
    <clr-dg-column [clrDgField]="'name'">Name</clr-dg-column> 

    <clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user"> 
    <clr-dg-cell>{{user.id}}</clr-dg-cell> 
    <clr-dg-cell>{{user.name}}</clr-dg-cell> 

    <!-- Example using a wrapper component --> 
    <!--<detail-wrapper *clrIfExpanded ngProjectAs="clr-dg-row-detail" class="datagrid-row-flex"></detail-wrapper>--> 

    <clr-dg-row-detail *clrIfExpanded [clrDgReplace]="true"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in neque in ante placerat mattis id sed quam. Proin rhoncus lacus et tempor dignissim. Vivamus sem quam, pellentesque aliquet suscipit eget, pellentesque sed arcu. Vivamus in dui lectus. Suspendisse 
      cursus est ac nisl imperdiet viverra. Aenean sagittis nibh lacus, in eleifend urna ultrices et. Mauris porttitor nisi nec velit pharetra porttitor. Vestibulum vulputate sollicitudin dolor ut tincidunt. Phasellus vitae blandit felis. Nullam 
      posuere ipsum tincidunt velit pellentesque rhoncus. Morbi faucibus ut ipsum at malesuada. Nam vestibulum felis sit amet metus finibus hendrerit. Fusce faucibus odio eget ex vulputate rhoncus. Fusce nec aliquam leo, at suscipit diam. 
    </clr-dg-row-detail> 
    </clr-dg-row> 


    <clr-dg-footer>{{users.length}} users</clr-dg-footer> 
</clr-datagrid> 

la Plnkr Voici répliquez la question: https://plnkr.co/edit/SSHfKApni8pWwXDEhuas?p=preview

Answer 1

Vous pouvez ajouter une propriété remplacer à votre objet utilisateur et définir ceux que vous souhaitez remplacer avec des détails à vrai et les autres à faux.

Notez le propert de user.replace sur le composant clr-dg-row-deatil dans le fichier app.component.ts

<clr-dg-row-detail *clrIfExpanded [clrDgReplace]="user.replace"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit ... 
</clr-dg-row-detail> 

Voici un plunker avec un exemple concret de la façon de le faire. https://plnkr.co/edit/r4Fr7NUWvqyubwLGbucJ?p=preview