詳細な拡張行をClarity Datagridの詳細に置き換えます。

Question

Clarity Datagridを使用しており、ここに記載されている機能を使用しようとしています：https://vmware.github.io/clarity/documentation/datagrid/expandable-rows。私はclrDgReplace入力を使用して、行が展開されているときにその行を詳細に置き換えたいが、いくつかの行（すべての行ではない）に対してのみこれを実行したい。どのようにこの動作を達成できますか？ここで

は私のデータグリッドコードです：ここで

<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

Answer 1

あなたはあなたのユーザーオブジェクトに置き換えるプロパティを追加し、細部に置き換えたいものを設定することができます真実に、そして他は偽に。

注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