Angular - 如何在数据网格中显示数组数组？

Question

我将项目清晰度用于角度数据网格。我的数据结构是这样的。 它是数组的数组，其中内部数组是动态的。每行可以有不同的键值对，如下所示。

answers: Answer[] = 
[  
   {  
      qId:"dg45",
      answers:[  
         {  
            question:'900ea552-ef68-42cc-b6a6-b8c4dff10fb7',
            section:'A',
            subsection:'B',
            answer:32,
            type:'Powers Schneider'
         },
         {  
            question:'880381d3-8dca-4aed-b207-b3b4e575a15f',
            section:'A',
            answer:25
         },
         {  
            question:'87b47684-c465-4c51-8c88-3f1a1aa2671b',
            answer:32,
            type:'Boyer Stanley'
         }
      ]
   }
]

我在数据网格中显示它，例如 qId 是主行，单击主行后它会展开到显示答案的树视图。 但我能够以预期的格式显示，如下所示。我需要在单独的行中将每个答案显示为行和列。

<clr-datagrid [style.height.px]="fixedHeight ? 458 : null" [(clrDgSelected)]="selected">
  <clr-dg-column>qId</clr-dg-column>

  <clr-dg-row *clrDgItems="let answer of answers" [clrDgItem]="answer">
    <clr-dg-cell>{{answer.qId}}</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]="replace">

      <clr-dg-row *ngFor="let a of answer.answers" [clrDgItem]="answers">
      // I need to show it this way
      //     question:'900ea552-ef68-42cc-b6a6-b8c4dff10fb7',section:'A',subsection:'B',answer:32,type:'Powers Schneider'
      //     question:'880381d3-8dca-4aed-b207-b3b4e575a15f',section:'A',answer:25
      //     question:'87b47684-c465-4c51-8c88-3f1a1aa2671b',answer:32,type:'Boyer Stanley'

      </clr-dg-row>
    </clr-dg-row-detail>

  </clr-dg-row>
</clr-datagrid>

Answer 1

没有分层数据网格支持，这基本上是您所要求的。请参阅https://github.com/vmware/clarity/issues/2759#issuecomment-431416383 了解我们不支持此功能的原因。

也就是说，主/细节功能的工作正在进行中，这将允许您打开侧面板以显示第二个数据网格。一旦准备好，这将是建议。