クラリティグリッドローエキスパンダ：行データがインライン編集のためにフォームにラップされていても、グリッドのプレースホルダが表示されます

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> 

。このユースケースはサポートされていないのですか、何か不足していますか？ユースケースを明確にするためにいくつかの余分な変更を加えてplunker修飾 - -

Answer 1

FormGroupディレクティブので、余分な包装形態の要素を必要としない、ならびにCLR-DG-行に追加することができる

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> 

行を展開し、行アクションをクリックして「編集」を選択します。