Clarity Grid Row Expander：我可以从我的函数中控制细节的打开吗

Question

我可以通过我的函数控制细节的打开吗？

是否可以将 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>

Answer 1

我不确定您所说的 "passing the 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>

Answer 2

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

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

Clarity Grid Row Expander：我可以从我的函数中控制细节的打开吗

Clarity Grid Row Expander: Can I control the opening of the detail from my function

vmware-clarity

clarity