首页 文章

条件清晰度Datagrid可扩展行

提问于
浏览 次
1

我的数据模型是一个包含多行的矩阵，其中一些行包含我想使用Clarity Datagrid可扩展行显示的详细信息 . 这是我想要构建的简单版本：

<clr-datagrid>
  <clr-dg-column>Artifact</clr-dg-column>
  <clr-dg-column>Category</clr-dg-column>
  <clr-dg-row>
    <clr-dg-cell>AAA</clr-dg-cell>
    <clr-dg-cell>111</clr-dg-cell>
    <ng-container *ngIf="true">
      <clr-dg-row-detail *clrIfExpanded>
        <clr-dg-cell>BBB</clr-dg-cell>
        <clr-dg-cell>222</clr-dg-cell>
      </clr-dg-row-detail>
    </ng-container>
  </clr-dg-row>
  <clr-dg-row>
    <clr-dg-cell>CCC</clr-dg-cell>
    <clr-dg-cell>333</clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>

我期待看到以下内容：

enter image description here

不幸的是，这是我得到的结果：

enter image description here

当我用任何元素（例如div，ng-container等）包装clr-dg-row-detail时会发生此问题 . 我需要一个wrap元素来放置一个条件表达式，因为不是每一行都有详细信息 .

有没有人有这样做的建议？

vmware-clarity

1 回答

  • 3

    您需要使用 ngProjectAs ，这是没有记录的，所以除了询问之外你没有什么可做的 . 这就是它的样子：

    <ng-container ngProjectAs="clr-dg-row-detail" *ngIf="true">
  <clr-dg-row-detail *clrIfExpanded>
    <clr-dg-cell>BBB</clr-dg-cell>
    <clr-dg-cell>222</clr-dg-cell>
  </clr-dg-row-detail>
</ng-container>
    回复于

相关问题