Clarity Datagrid：使用行扩展器仅替换特定单元格而不是整行答案

【问题标题】：Clarity Datagrid: Replace only specific cells and not the entire row using row expanderClarity Datagrid：使用行扩展器仅替换特定单元格而不是整行
【发布时间】：2017-09-19 10:15:30
【问题描述】：

我有一个用例，其中我的行中的一个单元格是一个复选框，另一个是单选按钮。我正在使用网格行扩展器来替换扩展行的内容，但复选框和单选按钮也被替换。我不希望这种情况发生。

我正在寻找一种方法，我可以选择仅替换特定单元格而不是使用行扩展器替换整行。

<clr-datagrid>
    <clr-dg-column>User ID</clr-dg-column>
    <clr-dg-column [clrDgField]="'name'">Name</clr-dg-column>
    <clr-dg-column>Allow access?</clr-dg-column>
    <clr-dg-column>Default User</clr-dg-column>

    <clr-dg-row *clrDgItems="let user of users; let index=index" [clrDgItem]="user">
      <clr-dg-cell>{{user.id}}</clr-dg-cell>
      <clr-dg-cell>{{user.name}}</clr-dg-cell>
      <clr-dg-cell>
        <div class="checkbox">
          <input type="checkbox" id="access-{{index}}">
          <label for="access-{{index}}"></label>
        </div>
      </clr-dg-cell>
      <clr-dg-cell>
        <div class="radio-inline">
          <input type="radio" name="default-radios" id="default-{{index}}">
          <label for="default-{{index}}"></label>
        </div>
      </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]="true">
        <clr-dg-cell>{{user.id}}</clr-dg-cell>
        <clr-dg-cell>{{user.name}}</clr-dg-cell>
        <clr-dg-cell></clr-dg-cell>
        <clr-dg-cell></clr-dg-cell>
      </clr-dg-row-detail>
    </clr-dg-row>


    <clr-dg-footer>{{users.length}} users</clr-dg-footer>
  </clr-datagrid>

Plunkr：https://plnkr.co/edit/WpGZi50bT3TmIkuFZ9fw

【问题讨论】：

标签： vmware-clarity

【解决方案1】：

可展开行要么替换内容（如您在此处配置的那样），要么将内容添加到内容下方的可展开行区域中。如果要有条件地更改行中的值，可以通过跟踪行扩展的状态来实现。您可以将 NgIf 放在单元格本身上，也可以将其放在单元格内的某些内容上，但您必须删除替换行以保留内容的能力。

这是您的 plunkr 中的一个示例。

    <clr-dg-row *clrDgItems="let user of users; let index=index" [clrDgItem]="user">
      <!-- Change the cells based on the `user.expanded` property -->
      <clr-dg-cell *ngIf="!user.expanded">{{user.id}}</clr-dg-cell>
      <clr-dg-cell *ngIf="user.expanded">Expanded</clr-dg-cell>
      <clr-dg-cell *ngIf="!user.expanded">{{user.name}}</clr-dg-cell>
      <clr-dg-cell *ngIf="user.expanded">Expanded</clr-dg-cell>
      <clr-dg-cell>
        <div class="checkbox">
          <input type="checkbox" id="access-{{index}}">
          <label for="access-{{index}}"></label>
        </div>
      </clr-dg-cell>
      <clr-dg-cell>
        <div class="radio-inline">
          <input type="radio" name="default-radios" id="default-{{index}}">
          <label for="default-{{index}}"></label>
        </div>
      </clr-dg-cell>
      <!-- To handle two way binding, need to use ng-template and bind to the `user.expanded` property -->
      <ng-template ngProjectAs="clr-dg-row-detail" [(clrIfExpanded)]="user.expanded">
        <clr-dg-row-detail>
          <clr-dg-cell>{{user.id}}</clr-dg-cell>
          <clr-dg-cell>{{user.name}}</clr-dg-cell>
          <clr-dg-cell></clr-dg-cell>
          <clr-dg-cell></clr-dg-cell>
        </clr-dg-row-detail>
      </ng-template>
    </clr-dg-row>

https://plnkr.co/edit/iEvziaiOOKIaYbjvwUuA?p=preview

【讨论】：