Clarity Grid Row Expander : 행 데이터가 인라인 편집을 위해 양식으로 싸여 있어도 격자 자리 표시자가 표시됩니다.

Question

행 및 행 세부 정보에 걸쳐 양식을 사용하는 Clarity 데이터 격자 행을 구현하고 있습니다. 여기에 빠른 재판이다 - 나는 요소 ""각 양식을 포장하는 경우 그리드의 레코드가있는 경우에도 다음 데이터 그리드 빈 자리가 눈에 보이는 것을 여기서 문제에 직면하고있다

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

<clr-datagrid> 
     <clr-dg-column>User ID</clr-dg-column> 
     <clr-dg-column>Name</clr-dg-column> 
     <clr-dg-column>Age</clr-dg-column> 

     <ng-container *ngFor="let user of users; let i=index;"> 
      <form (ngSubmit)="commitRow(i)" [formGroup]="formGroups[i]"> 
      <clr-dg-row (clrDgExpandedChange)="expandChanged($event, i)"> 
       <clr-dg-cell>{{user.id}}</clr-dg-cell> 
       <clr-dg-cell> 
        <ng-container *ngIf="!user.expanded"> 
        {{user.userName}} 
        </ng-container> 
        <ng-container *ngIf="user.expanded"> 
        <input type="text" formControlName="userName" style="max-width:100px;"> 
        </ng-container> 
       </clr-dg-cell> 
       <clr-dg-cell> 
        <ng-container *ngIf="!user.expanded; else edit"> 
        {{user.age}} 
        </ng-container> 
        <ng-container *ngIf="user.expanded"> 
         <input type="text" formControlName="age" style="max-width:100px;"> 
        </ng-container> 
        </clr-dg-cell> 
       <my-detail *clrIfExpanded ngProjectAs="clr-dg-row-detail" [userFormGroup]="formGroups[i]"></my-detail> 
      </clr-dg-row> 
     </form> 
     </ng-container> 

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

. 이 유스 케이스가 지원되지 않습니까? 아니면 뭔가 빠졌습니까?

Answer 1

지시어뿐만 아니라 CLR-DG-행에 추가 할 수 있습니다

FormGroup 때문에 별도의 포장 형태 요소가 필요하지 않습니다 -

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

<clr-datagrid> 
     <clr-dg-column>User ID</clr-dg-column> 
     <clr-dg-column>Name</clr-dg-column> 
     <clr-dg-column>Age</clr-dg-column> 

      <clr-dg-row 
       [clrDgExpanded]="row.expanded" 
       (clrDgExpandedChange)="expandChange($event, row)" 
       [formGroup]="row.formGroup" 
       *ngFor="let row of rows; let i=index;"> 
       <clr-dg-action-overflow> 
        <button class="action-item" (click)="onEdit(row)">Edit</button> 
        <button class="action-item" (click)="onDelete(row)">Delete</button> 
       </clr-dg-action-overflow>     
       <clr-dg-cell>{{row.id}}</clr-dg-cell> 
       <clr-dg-cell> 
        <ng-container *ngIf="!row.editing"> 
        {{row.user.userName}} 
        </ng-container> 
        <ng-container *ngIf="row.editing"> 
        <input type="text" formControlName="userName" style="max-width:100px;"> 
        </ng-container> 
       </clr-dg-cell> 
       <clr-dg-cell> 
        <ng-container *ngIf="!row.editing"> 
        {{row.user.age}} 
        </ng-container> 
        <ng-container *ngIf="row.editing"> 
         <input type="text" formControlName="age" style="max-width:100px;"> 
        </ng-container> 
        </clr-dg-cell> 
       <my-detail *clrIfExpanded 
         ngProjectAs="clr-dg-row-detail" 
         [userFormGroup]="row.formGroup" 
         [editing]="row.editing" 
         (onSubmit)="onRowSubmit($event, row)" 
         (onCancel)="row.editing=false" 
         ></my-detail> 
      </clr-dg-row> 


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

- 명확한 사용 사례를 만들기 위해 몇 가지 추가 수정을 plunker 수정

행을 펼친 다음 행 동작을 클릭하고 편집을 선택하십시오.