0

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

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

<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

4

1 回答 1

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

于 2017-09-19T15:51:11.360 回答