Clarity Grid Row Expander: Могу ли я контролировать открытие деталей из моей функции - PullRequest
0 голосов
/ 03 мая 2018

Могу ли я контролировать открытие детали из моей функции?

Можно ли передать "clr-dg-row-detail" EventEmitter, чтобы я мог генерировать в событии компонента об открытии детали.

<clr-datagrid>
  <clr-dg-column>Artifact</clr-dg-column>
  <clr-dg-column>Category</clr-dg-column>
  <clr-dg-column>Action</clr-dg-column>

  <clr-dg-row>
    <clr-dg-cell>AAA</clr-dg-cell>
    <clr-dg-cell>111</clr-dg-cell>
    <clr-dg-cell>
      <button (click)="myFunctionFromOpenDetail()">
        MY BUTTON!
      </button>
    </clr-dg-cell>
    <ng-container ngProjectAs="clr-dg-row-detail" *ngIf="true">
      <clr-dg-row-detail *clrIfExpanded ?????????? >
        Lorem ipsum...
      </clr-dg-row-detail>
    </ng-container>
  </clr-dg-row>
</clr-datagrid>

1 Ответ

0 голосов
/ 04 мая 2018

Я не уверен, что вы подразумеваете под "передачей EventEmitter", это не шаблон, который я понимаю с Angular. Но директива clrIfExpanded обеспечивает двустороннюю привязку к расширенному состоянию деталей, так что это выглядит так, как вы ищете.

Если вам нужно открыть только некоторые детали, вы можете сделать это:

<clr-dg-row-detail *clrIfExpanded="true">...</clr-dg-row-detail>

Или замените true на любую переменную, определяющую, развернута ли строка.

Если вам требуется полное двустороннее связывание для динамического расширения и закрытия строк, вам нужно будет использовать синтаксис без сахара, поскольку Angular не предоставляет способ использовать двустороннее связывание с * звездный короткий синтаксис:

<ng-template [(clrIfExpanded)]="yourRow.expanded">
    <clr-dg-row-detail>...</clr-dg-row-detail>
</ng-template>
...