Angular项目Clarity Datagrid展开行数据被覆盖问题如何解决

当前基于Clarity datagrid实现的行展开加载详情功能存在两个异常：

• 点击其他行的展开按钮后，之前已展开行的结果集会被新获取的数据覆盖
• 展开行的布局对齐出现异常

现有代码 #

HTML模板 #

<clr-datagrid>
    <clr-dg-column>Order ID
        <clr-dg-string-filter [clrDgStringFilter]="orderFilter"></clr-dg-string-filter>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'suborg'" [clrDgSortOrder]="ascSort">Suborg
        <clr-dg-string-filter [clrDgStringFilter]="subOrgFilter"></clr-dg-string-filter>
    </clr-dg-column>
    <clr-dg-column> Rules </clr-dg-column>
    <clr-dg-column> FailedRules </clr-dg-column>
    <clr-dg-row *clrDgItems="let order of orders" [clrDgItem]="order" (clrDgExpandedChange)="expandChange($event, order)">
        <clr-dg-cell>{{order.orderID}}</clr-dg-cell>
        <clr-dg-cell>{{order.suborg}}</clr-dg-cell>
        <clr-dg-cell>{{order.requestType}}</clr-dg-cell>
        <clr-dg-cell>{{order.failedRules}}</clr-dg-cell>
        <clr-dg-row-detail *clrIfExpanded [clrDgReplace]="order.replace">
            <ng-template ngProjectAs="clr-dg-row-detail" [(clrIfExpanded)]="order.expanded">
                <clr-dg-row-detail>
                    <div class="dg-wrapper">
                        <clr-datagrid>
                            <clr-dg-column [style.width.px]="250">Message Type</clr-dg-column>
                            <clr-dg-column [style.width.px]="200">Process Time</clr-dg-column>
                            <clr-dg-column [style.width.px]="50">Status </clr-dg-column>
                            <clr-dg-column [style.width.px]="50"> Message </clr-dg-column>
                            <clr-dg-row *clrDgItems="let data of ordersinfo" [clrDgItem]="data">
                                <clr-dg-cell>{{data.type}}</clr-dg-cell>
                                <clr-dg-cell>{{data.timeStamp}}</clr-dg-cell>
                                <clr-dg-cell> <span class="color-square" [style.backgroundColor]="data.color"></span> </clr-dg-cell>
                                <clr-dg-cell> <a [routerLink]="" (click)="open(data)">show</a></clr-dg-cell>
                            </clr-dg-row>
                        </clr-datagrid>
                    </div>
                </clr-dg-row-detail>
            </ng-template>
        </clr-dg-row-detail>
    </clr-dg-row>
</clr-datagrid>

TS逻辑 #

expandChange(value, row) {
    this.selectedrow = row;
    if (value) {
      console.log("In selected Changed", row);
      this.spinnerService.show();
      this._order.getOrderData(row.orderID, row.status, row.suborg).subscribe(res => {
        this.searchordersinfo = res;
        this.searchordersinfo = this.searchordersinfo.filter(x => x != null);
      });
    }
 }

1. 数据覆盖问题：所有行的展开详情都绑定了同一个全局变量存储请求结果，新请求返回的数据会覆盖旧数据，所有已展开的行都会读取这个全局变量，自然全部显示最新请求的内容。
2. 布局异常问题：Clarity datagrid的行详情嵌套了多余的<clr-dg-row-detail>标签，滥用了clrDgReplace属性，同时嵌套的内层datagrid没有做宽度适配，导致布局错位。

1. TS逻辑修改 #

把请求到的详情数据存在当前点击行的自定义属性中，不再使用全局变量存储，避免覆盖。

expandChange(value, row) {
    this.selectedrow = row;
    if (value) {
      // 已请求过数据可直接复用，不需要重复请求可保留这行判断，否则删掉
      if (row.orderInfo) return;
      console.log("In selected Changed", row);
      this.spinnerService.show();
      this._order.getOrderData(row.orderID, row.status, row.suborg).subscribe(res => {
        // 数据存储到当前行的自定义属性
        row.orderInfo = res.filter(x => x != null);
        this.spinnerService.hide();
      });
    }
 }

2. HTML模板修改 #

去掉多余的嵌套标签，调整数据源绑定和样式适配：

<clr-datagrid>
    <clr-dg-column>Order ID
        <clr-dg-string-filter [clrDgStringFilter]="orderFilter"></clr-dg-string-filter>
    </clr-dg-column>
    <clr-dg-column [clrDgField]="'suborg'" [clrDgSortOrder]="ascSort">Suborg
        <clr-dg-string-filter [clrDgStringFilter]="subOrgFilter"></clr-dg-string-filter>
    </clr-dg-column>
    <clr-dg-column> Rules </clr-dg-column>
    <clr-dg-column> FailedRules </clr-dg-column>
    <clr-dg-row *clrDgItems="let order of orders" [clrDgItem]="order" (clrDgExpandedChange)="expandChange($event, order)">
        <clr-dg-cell>{{order.orderID}}</clr-dg-cell>
        <clr-dg-cell>{{order.suborg}}</clr-dg-cell>
        <clr-dg-cell>{{order.requestType}}</clr-dg-cell>
        <clr-dg-cell>{{order.failedRules}}</clr-dg-cell>
        <!-- 去掉多余嵌套，直接绑定当前行展开状态 -->
        <clr-dg-row-detail *clrIfExpanded="order.expanded">
            <div class="dg-wrapper" style="width: 100%; padding: 0 1rem;">
                <!-- 内层datagrid宽度适配父容器 -->
                <clr-datagrid style="width: 100%">
                    <clr-dg-column [style.width.px]="250">Message Type</clr-dg-column>
                    <clr-dg-column [style.width.px]="200">Process Time</clr-dg-column>
                    <clr-dg-column [style.width.px]="50">Status </clr-dg-column>
                    <clr-dg-column> Message </clr-dg-column>
                    <!-- 数据源绑定当前行的orderInfo，不再用全局变量 -->
                    <clr-dg-row *clrDgItems="let data of order.orderInfo" [clrDgItem]="data">
                        <clr-dg-cell>{{data.type}}</clr-dg-cell>
                        <clr-dg-cell>{{data.timeStamp}}</clr-dg-cell>
                        <clr-dg-cell> <span class="color-square" [style.backgroundColor]="data.color"></span> </clr-dg-cell>
                        <clr-dg-cell> <a [routerLink]="" (click)="open(data)">show</a></clr-dg-cell>
                    </clr-dg-row>
                </clr-datagrid>
            </div>
        </clr-dg-row-detail>
    </clr-dg-row>
</clr-datagrid>

内容的提问来源于stack exchange，提问作者Happs