Clarté Datagrid: Remplace uniquement les cellules spécifiques et pas toute la ligne à l'aide de l'expanseur de ligne

Question

J'ai un cas d'utilisation dans lequel une des cellules de ma rangée est une case à cocher et une autre est un bouton radio. J'utilise l'expandeur de ligne de la grille pour remplacer le contenu de la ligne lors de l'expansion, mais la case à cocher et le bouton radio sont également remplacés. Je ne veux pas que cela arrive.

Je cherche une façon dont je peux choisir de remplacer seulement des cellules spécifiques et pas la rangée entière sur l'aide de l'expanseur de rangée.

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

    <clr-dg-row *clrDgItems="let user of users; let index=index" [clrDgItem]="user"> 
     <clr-dg-cell>{{user.id}}</clr-dg-cell> 
     <clr-dg-cell>{{user.name}}</clr-dg-cell> 
     <clr-dg-cell> 
     <div class="checkbox"> 
      <input type="checkbox" id="access-{{index}}"> 
      <label for="access-{{index}}"></label> 
     </div> 
     </clr-dg-cell> 
     <clr-dg-cell> 
     <div class="radio-inline"> 
      <input type="radio" name="default-radios" id="default-{{index}}"> 
      <label for="default-{{index}}"></label> 
     </div> 
     </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"> 
     <clr-dg-cell>{{user.id}}</clr-dg-cell> 
     <clr-dg-cell>{{user.name}}</clr-dg-cell> 
     <clr-dg-cell></clr-dg-cell> 
     <clr-dg-cell></clr-dg-cell> 
     </clr-dg-row-detail> 
    </clr-dg-row> 


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

Plunkr: https://plnkr.co/edit/WpGZi50bT3TmIkuFZ9fw

Answer 1

Les lignes extensibles soit remplacer le contenu (que vous avez configuré ici) ou il ajoute du contenu dans la zone extensible ligne au-dessous du contenu. Si vous souhaitez modifier les valeurs de manière conditionnelle dans la ligne, vous pouvez le faire en suivant l'état de l'expansion de ligne. Vous pouvez soit mettre NgIf sur la cellule elle-même, ou le mettre sur du contenu à l'intérieur de la cellule, mais vous devez supprimer la possibilité de remplacer la ligne pour conserver le contenu.

Voici un exemple de votre plunkr.

<clr-dg-row *clrDgItems="let user of users; let index=index" [clrDgItem]="user"> 
     <!-- Change the cells based on the `user.expanded` property --> 
     <clr-dg-cell *ngIf="!user.expanded">{{user.id}}</clr-dg-cell> 
     <clr-dg-cell *ngIf="user.expanded">Expanded</clr-dg-cell> 
     <clr-dg-cell *ngIf="!user.expanded">{{user.name}}</clr-dg-cell> 
     <clr-dg-cell *ngIf="user.expanded">Expanded</clr-dg-cell> 
     <clr-dg-cell> 
     <div class="checkbox"> 
      <input type="checkbox" id="access-{{index}}"> 
      <label for="access-{{index}}"></label> 
     </div> 
     </clr-dg-cell> 
     <clr-dg-cell> 
     <div class="radio-inline"> 
      <input type="radio" name="default-radios" id="default-{{index}}"> 
      <label for="default-{{index}}"></label> 
     </div> 
     </clr-dg-cell> 
     <!-- To handle two way binding, need to use ng-template and bind to the `user.expanded` property --> 
     <ng-template ngProjectAs="clr-dg-row-detail" [(clrIfExpanded)]="user.expanded"> 
     <clr-dg-row-detail> 
      <clr-dg-cell>{{user.id}}</clr-dg-cell> 
      <clr-dg-cell>{{user.name}}</clr-dg-cell> 
      <clr-dg-cell></clr-dg-cell> 
      <clr-dg-cell></clr-dg-cell> 
     </clr-dg-row-detail> 
     </ng-template> 
    </clr-dg-row> 

https://plnkr.co/edit/iEvziaiOOKIaYbjvwUuA?p=preview