首页 文章

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

提问于
浏览 次
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>

普兰克：https://plnkr.co/edit/WpGZi50bT3TmIkuFZ9fw

vmware-clarity

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

    回复于

相关问题