Clarity Grid Row Expander：网格占位符可见，即使有行数据包装在表格中以进行内联编辑答案

【问题标题】：Clarity Grid Row Expander: Grid placeholder is visible even if there is row data is wrapped in form for inline editClarity Grid Row Expander：网格占位符可见，即使有行数据包装在表格中以进行内联编辑
【发布时间】：2017-11-06 19:50:41
【问题描述】：

我正在实现一个 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>

我在这里面临的问题是，如果我将每个表单包装在“”元素中，那么即使网格中有记录，datagrid 空占位符也是可见的。是不支持这个用例还是我遗漏了什么？

【问题讨论】：

标签： datagrid inline-editing vmware-clarity

【解决方案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>

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

【讨论】：