Turbo表无法对列进行排序

Question

我正在使用 PrimeNG angular 的涡轮表，我想对列宽、长度和厚度进行排序。我申请遵循代码示例，但它不起作用我不知道为什么，这是我的代码：

<p-table [value]="section" sortField="Thickness" sortMode="single" *ngFor="let section of sections">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th>Quantity</th>
                                    <th>Length</th>
                                    <th>Width</th>
                                    <th [pSortableColumn]="Thickness">Thickness</th>
                                    <th>T</th>
                                    <th>B</th>
                                    <th>L</th>
                                    <th>R</th>
                                    <th>EAR</th>
                                    <th>D/S</th>
                                    <th>m^2</th>
                                    <th></th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-rowData>
                                <tr>
                                    <th colspan="4">
                                        <div (click)="EditSection(rowData.IsCustom, rowData)" class="text-left">{{rowData.SectionName +" "+ rowData.Description.Description + " " + (rowData.Extras
                                            != undefined ? rowData.Extras.join(" ") : "") + " " + rowData.Colour + " " +
                                            rowData.Finish.Description + " - $" + rowData.Rate +" / sqm" }}
                                        </div>
                                    </th>
                                    <th colspan="8" *ngIf="!rowData.IsCustom">
                                        <div class="md-inputfield">
                                            <p-autoComplete field="text" name="acPiece" delay="1000" (onSelect)="selectedPieces($event, rowData.SectionName)" [suggestions]="acPieces"
                                                (completeMethod)="autoCompletePiece($event, rowData.SectionName)"></p-autoComplete>
                                        </div>
                                    </th>
                                </tr>
                                <tr *ngFor="let piece of rowData.Pieces; let i = index">
                                    <td>
                                        <p-spinner [name]="rowData.SectionName+'_spQuantity_'+i" #spQuantity="ngModel" [(ngModel)]="piece.Quantity"></p-spinner>
                                    </td>
                                    <td pEditableColumn>
                                        <p-cellEditor *ngIf="!rowData.IsCustom">
                                            <ng-template pTemplate="input">
                                                <input type="text" [name]="rowData.SectionName+'_length_'+i" [(ngModel)]="piece.Length">
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                {{piece.Length}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>
                                    <td pEditableColumn>
                                        <p-cellEditor *ngIf="!rowData.IsCustom">
                                            <ng-template pTemplate="input">
                                                <input type="text" [name]="rowData.SectionName+'_width_'+i" [(ngModel)]="piece.Width">
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                {{piece.Width}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>
                                    <td pEditableColumn>
                                        <p-cellEditor *ngIf="(!rowData.IsCustom)">
                                            <ng-template pTemplate="input">
                                                <input type="text" [name]="rowData.SectionName+'_thickness_'+i" [(ngModel)]="piece.Thickness">
                                            </ng-template>
                                            <ng-template pTemplate="output">
                                                {{piece.Thickness}}
                                            </ng-template>
                                        </p-cellEditor>
                                    </td>
                                    <td>
                                        <p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_Top'+i" binary="true" [(ngModel)]="piece.Top"></p-checkbox>
                                    </td>
                                    <td>
                                        <p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_Bottom'+i" binary="true" [(ngModel)]="piece.Bottom"></p-checkbox>
                                    </td>
                                    <td>
                                        <p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_Left'+i" binary="true" [(ngModel)]="piece.Left"></p-checkbox>
                                    </td>
                                    <td>
                                        <p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_Right'+i" binary="true" [(ngModel)]="piece.Right"></p-checkbox>
                                    </td>
                                    <td>
                                        <p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_EAR'+i" binary="true" [(ngModel)]="piece.EAR"></p-checkbox>
                                    </td>
                                    <td>
                                        <p-checkbox *ngIf="(!rowData.IsCustom)" [name]="rowData.SectionName+'_groupname_DoubleSide'+i" binary="true" [(ngModel)]="piece.DoubleSide"></p-checkbox>
                                    </td>
                                    <td *ngIf="(!rowData.IsCustom)">
                                        {{calculateTotalArea(piece)}}
                                    </td>
                                    <td *ngIf="(!rowData.IsCustom)">
                                        <button pButton type="button" icon="fa-close" (click)="removePieceItem(i, rowData.SectionName)"></button>
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>

我在 turbo 表中添加了两个属性：sortField="Thickness" sortMode="single" 但它不起作用，任何人帮助我解决这个问题，谢谢 http://plnkr.co/edit/vEsGORleWpf3YKBGwYDx?p=preview

Answer 1

这是一个使用厚度列排序的示例。

因为我不知道你是否可以根据文档只对特定字段进行排序，所以我创建了一个自定义的click 事件：

<th (click)="sortByThickness(sectionIndex)">Thickness</th>

这是排序逻辑：

sortByThickness(sectionIndex) {
    const thisRef = this;
    this.sections[sectionIndex][0].Pieces.sort(function(a, b){
      return (a.Thickness - b.Thickness)*thisRef.descThicknessOrder;
    });

    // save order choice
    this.descThicknessOrder *= -1;
}

这是一个有效的Plunker

这是你需要的吗？你有什么问题吗？