首页 文章

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

提问于
浏览
2

我正在使用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

1 回答

  • 3

    您可以向用户对象添加替换属性,并将要替换的属性设置为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

相关问题