Ersetzen Sie bestimmte erweiterte Zeilen mit Details in Clarity Datagrid

Question

Ich verwende das Clarity Datagrid und versuche, die Funktion zu verwenden, die hier erwähnt wird: https://vmware.github.io/clarity/documentation/datagrid/expandable-rows. Ich möchte die clrDgReplace Eingabe verwenden, um die Zeile mit den Details zu ersetzen, wenn die Zeile erweitert wird, aber ich möchte dies nur für ein paar Zeilen (nicht alle Zeilen) tun. Wie kann ich dieses Verhalten erreichen?

Hier ist mein Datagrid-Code:

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

Hier repliziert die Plnkr die Frage: https://plnkr.co/edit/SSHfKApni8pWwXDEhuas?p=preview

Answer 1

Sie können eine ersetzen Eigenschaft zu Ihrem Benutzerobjekt hinzufügen und diejenigen, legen Sie mit Detail ersetzen möchten zu wahr und die anderen zu falsch.

Notiere die user.replace propert auf der clr-dg-row-deatil Komponente in der app.component.ts Datei

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

Hier ist ein Plunker mit einem Arbeits Beispiel dafür, wie dies zu tun. https://plnkr.co/edit/r4Fr7NUWvqyubwLGbucJ?p=preview