清晰度网格行扩展器:即使行数据包装在表单中以进行内联编辑，网格占位符也是可见的

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

FormGroup 指令也可以添加到 clr-dg-row 中，因此不需要额外的包装表单元素 - 修改了 plunker，只需进行一些额外的修改以使用例清晰 -

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>

展开该行，然后单击行操作并选择编辑。