2

我正在使用 Clarity Datagrid 并尝试使用此处提到的功能：https ://vmware.github.io/clarity/documentation/datagrid/expandable-rows 。当行展开时，我想使用clrDgReplaceInput 将行替换为详细信息，但我只想对几行（不是所有行）执行此操作。我怎样才能实现这种行为？

这是我的数据网格代码：

<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

4

1 回答 1

3

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

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

<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

于 2017-09-15T23:09:04.443 回答