Clarity Grid Row Expander：我可以从我的功能中控制细节的打开吗答案

【问题标题】：Clarity Grid Row Expander: Can I control the opening of the detail from my functionClarity Grid Row Expander：我可以从我的功能中控制细节的打开吗
【发布时间】：2018-05-03 13:29:25
【问题描述】：

我可以从我的函数中控制细节的打开吗？

是否可以将 EventEmitter 传递给“clr-dg-row-detail”，以便我可以在组件事件中发出关于打开详细信息的事件。

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

【问题讨论】：

标签： vmware-clarity clarity

【解决方案1】：

在以后的清晰版本 (2.x) 中，您将需要它来进行双向绑定，否则 V 形将旋转但内容不会显示为 ng-template 示例：

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

【讨论】：

这是 Clarity 5 的有效解决方案

【解决方案2】：

我不确定您所说的“传递 EventEmitter”是什么意思，这不是我理解的 Angular 模式。但是clrIfExpanded 指令确实为细节的展开状态提供了双向绑定，因此看起来就像您正在寻找的那样。

如果你只需要强制打开一些细节，你可以这样做：

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

或者将true 替换为确定行是否展开的任何变量。

但是，如果您需要完整的双向绑定来动态扩展和关闭行，则需要使用去糖化语法，因为 Angular 不提供通过 @987654324 使用双向绑定的方法@star 短语法：

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

【讨论】：

它的工作原理是这样的： ...