Расширяемые строки Datagrid с условной четкостью

Моя модель данных представляет собой матрицу с несколькими строками, некоторые из этих строк содержат подробную информацию, которую я хотел бы показать с помощью расширяемых строк 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>

Я ожидал увидеть что-то вроде следующего:

введите описание изображения здесь

К сожалению, это результат, который я получаю:

введите описание изображения здесь

Эта проблема возникает, когда я оборачиваю clr-dg-row-detail любым элементом (например, div, ng-container и т. Д.). Мне нужен элемент обтекания, чтобы поместить условное выражение, потому что не каждая строка содержит подробную информацию.

Есть ли у кого-нибудь предложение сделать это?


vmware-clarity
person Max    schedule 02.03.2018    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Вам нужно использовать 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>
person Eudes    schedule 02.03.2018