2

我正在实现一个 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 空占位符也是可见的。不支持这个用例还是我遗漏了什么？

4

1 回答 1

4

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>

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

于 2017-11-06T19:51:32.407 回答