Question

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

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

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class WebcliApplication {

public static void main(String[] args) {
    SpringApplication.run(WebcliApplication.class, args);
}
}

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

Answer 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

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

1 个答案: