Я использую ясность проекта для угловой сетки данных. Моя структура данных такая.
Это массив массивов, где внутренний массив является динамическим. Он может иметь разные пары значений ключа для каждой строки, как показано ниже.
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>