Question

我正在使用angular2。我正在html表中使用ngFor指令创建可折叠的文件，并对表列进行了明智的排序。在对子折叠行进行排序之前，将其放置在主行之间并按预期工作，但在对可折叠行进行排序后，显示所有行的顶部。

使用排序选项仅适用于主行，而不适用于内部折叠行。

无法添加图片以进行清晰的说明。

stackblitz示例https://stackblitz.com/edit/angular-zoytga?file=src%2Fapp%2Fapp.component.html

<tbody class="portfolio-tbody">
    <ng-container *ngFor="let liveData of liveDatas let i=index">
        <tr class="portfolio-tr">
            <td class="portfolio-td">{{liveData.siteName}}
                <img src="../../images/caret.svg" class="portfolio-table-caret" data-toggle="collapse" [attr.data-target]="'.' + i" (click)="expandDevice(liveData.siteName, $event)">
            </td>
            <td class="portfolio-td">{{liveData.address}}</td>
            <td class="portfolio-td"><img src="../../images/{{liveData.ledHealth == 1 ? 'on_icon' : 'off_icon'}}.png"></td>
            <td class="portfolio-td"><img src="../../images/{{liveData.lightStatus == 1 ? 'on_icon' : 'off_icon'}}.png"></td>
            <td class="portfolio-td">{{liveData.SV}}</td>
            <td class="portfolio-td">{{liveData.SC}}</td>
            <td class="portfolio-td">{{liveData.BV}}</td>
            <td class="portfolio-td">{{liveData.BC}}</td>
            <td class="portfolio-td">{{liveData.ts | date:'dd-MM-yyyy HH:mm:ss'}}</td>
        </tr>

        <tr *ngFor="let thisSitsDevice of thisSitsDevices let ind=index">
            <ng-container *ngIf="liveData.siteName==thisSitsDevice.siteName">
                <td class="hiddenRow portfolio-td-devices">
                    <a [routerLink]="['/energy-index']">
                        <div class="collapse panel-collapse in" class={{i}}>{{thisSitsDevice.deviceName}}</div>
                    </a>
                </td>
                <td class="hiddenRow portfolio-td-devices">
                    <div class="collapse panel-collapse in" class={{i}}>{{thisSitsDevice.address}}</div>
                </td>
                <td class="hiddenRow portfolio-td-devices">
                    <div class="collapse panel-collapse in" class={{i}}>
                        <img src="../../images/{{thisSitsDevice.ledHealth == 1 ? 'on_icon' : 'off_icon'}}.png">
                    </div>
                </td>
                <td class="hiddenRow portfolio-td-devices">
                    <div class="collapse panel-collapse in" class={{i}}>
                        <img src="../../images/{{thisSitsDevice.lightStatus == 1 ? 'on_icon' : 'off_icon'}}.png">
                    </div>
                </td>
                <td class="hiddenRow portfolio-td-devices">
                    <div class="collapse panel-collapse in" class={{i}}>{{thisSitsDevice.SV}}</div>
                </td>
                <td class="hiddenRow portfolio-td-devices">
                    <div class="collapse panel-collapse in" class={{i}}>{{thisSitsDevice.SC}}</div>
                </td>
                <td class="hiddenRow portfolio-td-devices">
                    <div class="collapse panel-collapse in" class={{i}}>{{thisSitsDevice.BV}}</div>
                </td>
                <td class="hiddenRow portfolio-td-devices">
                    <div class="collapse panel-collapse in" class={{i}}>{{thisSitsDevice.BC}}</div>
                </td>
                <td class="hiddenRow portfolio-td-devices">
                    <div class="collapse panel-collapse in" class={{i}}>{{thisSitsDevice.ts | date:'dd-MM-yyyy HH:mm:ss'}}</div>
                </td>
            </ng-container>
        </tr>

    </ng-container>
    <tr *ngIf=" !liveDatas || liveDatas.length == 0 ">
        <td style="text-align: center;" colspan="9">No data to display....</td>
    </tr>
    <!--  <tr *ngIf=" liveDatas == undefined">
                <td style="text-align: center;" colspan="9">Loading....</td>
            </tr> -->
</tbody>

排序查询：

sortTable(f: any, n: number, sortingOrder: string) {
    var rows = $('#portfolio-table tbody .portfolio-[tr][1]').get();

    rows.sort(function(a: any, b: any) {

        var A = getVal(a);
        var B = getVal(b);

        if (sortingOrder == 'descending') {
            if (A < B) {
                return -1 * f;
            }
        }

        if (sortingOrder == 'ascending') {
            if (A > B) {
                return 1 * f;
            }
        }
        return 0;
    });

    function getVal(elm: any) {
        var v = $(elm).children('td').eq(n).text().toUpperCase();
        if ($.isNumeric(v)) {
            v = parseInt(v, 10);
        }
        return v;
    }

    $.each(rows, function(index: any, row: any) {
        $('#portfolio-table').children('tbody').append(row);
    });
}
sorting(sortingOrder: string) {
    this.f_sl *= -1;
    var n = 1
    this.sortTable(this.f_sl, n, sortingOrder);
}

排序也无法正常工作。

Answer 1

据我所知，您的问题是您仍在“思考jQuery”。

您不想直接在Angular中操纵dom。

您要操纵构建Dom的数据，因此，只要更改它，Angular就可以发挥他的魔力。

在您的代码中，您阅读dom并对其进行排序，而不是简单地处理数据。

首先：充分利用TypeScript。 liveDatas不是any，至少可以是any[]。您还可以为记录类定义类型，并为liveDatas记录获取自动补全。

第二：仅对数据进行排序，而不对行进行排序：

sortTable(f: number, n: number, sortingOrder: string) {
  this.liveDatas.sort((a: any, b: any) => {
    if (a.siteName > b.siteName) return f;
    if (a.siteName < b.siteName) return -f;
    return 0;
  }
}

第三：排序时允许Angular的ngFor跟踪行，因此实际上交换了Dom元素，而不是销毁它们。可能不会有太大的改变，但有时会有所改变，这是一个好习惯：

<!-- in your .html -->
<ng-container *ngFor="let liveData of liveDatas; let i=index; trackBy: trackByUniqueId">

功能的轨道主体

// in your .ts
trackByUniqueId(index: number, value: any): any {
  return value.siteName + value.ts; 
}

希望有帮助！

排序时，Angular 2表折叠无法正常工作

1 个答案: