2017-09-15 91 views
2

我使用了Clarity Datagrid,並試圖使用這裏提到的功能:https://vmware.github.io/clarity/documentation/datagrid/expandable-rows。我想使用clrDgReplace輸入來替換具有該行時展開的行的細節,但我只想對這幾行(不是所有行)執行此操作。我如何實現這種行爲?用Clarity Datagrid替換具體的展開行詳細信息

這裏是我的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> 

這裏是Plnkr複製問題:https://plnkr.co/edit/SSHfKApni8pWwXDEhuas?p=preview

回答

3

您可以將替代屬性添加到您的用戶對象,並設置要與細節,以取代那些爲真,其他爲假。

注意在app.component.ts文件

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

這裏clr-dg-row-deatil組件上的user.replace PROPERT是如何做到這一點的工作示例一plunker。 https://plnkr.co/edit/r4Fr7NUWvqyubwLGbucJ?p=preview