用 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

您可以将替换属性添加到您的用户对象，并将要用详细信息替换的那些设置为 true，将其他设置为 false。

注意 app.component.ts 文件中 clr-dg-row-deatil 组件的 user.replace 属性

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

这是一个 plunker，其中包含一个如何执行此操作的工作示例。 https://plnkr.co/edit/r4Fr7NUWvqyubwLGbucJ?p=preview

用 Clarity Datagrid 中的详细信息替换特定的扩展行

Replace specific expanded rows with detail in Clarity Datagrid

angular

vmware-clarity