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

Angular 用Clarity Datagrid中的详细信息替换特定的扩展行,angular,vmware-clarity,Angular,Vmware Clarity,我正在使用Clarity Datagrid,并尝试使用此处提到的功能:。当行展开时,我想使用clrdgreace输入将行替换为详细信息,但我只想对少数行(不是所有行)执行此操作。我如何实现这种行为 以下是我的datagrid代码: <clr-datagrid> <clr-dg-column>User ID</clr-dg-column> <clr-dg-column [clrDgField]="'name'">Name</clr-dg

我正在使用Clarity Datagrid,并尝试使用此处提到的功能:。当行展开时,我想使用
clrdgreace
输入将行替换为详细信息,但我只想对少数行(不是所有行)执行此操作。我如何实现这种行为

以下是我的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>

用户ID
名称
{{user.id}
{{user.name}
Lorem ipsum dolor sit amet,是一位杰出的献身者。在前一个位置的奈克中的Proin鼠mattis id sed quam。前菱形腔隙和时间尊严。Vivamus sem quam、pellentesque aliquet suscipit eget、pellentesque sed arcu。杜莱克托斯的维瓦摩斯。悬钩子
这是维韦拉的食物。埃涅阿斯射手座,位于埃利芬德乌尔特里斯和莫里斯·波特特(Mauris porttitor nisi nec velit pharetra porttitor)。前庭出血量大。健康猫。纳拉姆
波苏尔·伊普苏姆·廷西德·维利特·佩伦茨克·朗卡斯。Morbi faucibus和malesuada的同侧。猫科动物的前庭是一个很好的位置。这是一只秃鹫。在suscipit直径处的Fusce nec aliquam leo。
{{users.length}}个用户

以下是Plnkr复制问题的过程:

您可以向用户对象添加替换属性,并将要替换为详细信息的属性设置为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,其中有一个如何执行此操作的工作示例。