条件清晰数据网格可扩展行答案

【问题标题】：Conditional Clarity Datagrid Expandable Rows条件清晰数据网格可扩展行
【发布时间】：2018-03-02 17:54:02
【问题描述】：

我的数据模型是一个包含多行的矩阵，其中一些行包含我想使用 Clarity Datagrid Expandable Rows 显示的详细信息。这是我正在尝试构建的简单版本：

<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>

我期待看到如下内容：

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

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

有没有人建议这样做？

【问题讨论】：

标签： vmware-clarity

【解决方案1】：

您需要使用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>

【讨论】：