Mat 表可扩展行不适用于 mat sort Angular 10

Question

当我对 mat-table 的一列进行排序时，我无法再扩展我的行，只有大约二分之一仍然有效。虽然在没有排序的情况下一切都工作正常。 我发现了这个链接：https://github.com/angular/components/issues/11990#issuecomment-421075196 但这根本解决不了任何问题

组件.html：

            <td mat-cell class="expandable-row" *matCellDef="let element" [attr.colspan]="displayedColumns.length">
                <div *ngIf="element.codeTicket === expandedSymbol" class="container">
                    <div class="row">
                        <div class=" col-md-1"></div>
                        <div class=" col-md-10">
                            <mat-card >
                                <p style="white-space: pre-wrap;"><span class="badge badge-pill badge-light" id="badge">Description :</span>{{element.description}}</p>
                                <div>
                                    <mat-chip-list #chipList aria-label="Mots Clés">
                                        <span class="badge badge-pill badge-light" id="badge">Label :</span>
                                        <mat-chip *ngFor="let mot of element.motCles" matTooltip="{{mot.categorie.libelle}}"
                                                  [ngClass]="{'secondClass': mot.codeCategorie === 1,'firstClass': mot.codeCategorie === 2,'thirdClass': mot.codeCategorie === 3,'quatriemeClass': mot.codeCategorie === 4,'cinquiemeClass': mot.codeCategorie === 5,'sixiemeClass': mot.codeCategorie === 6,'spetiemeClass': mot.codeCategorie === 7 }">{{mot.libelle}}</mat-chip>
                                    </mat-chip-list>
                                </div>
                            </mat-card>
                        </div>
                    </div>
                </div>
            </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
            (click)="toggleExpandableSymbol(row.codeTicket)" [ngClass]="{'make-higlight': row.dateCloture !== null}"></tr>
        <tr mat-row
            *matRowDef="let row; columns: ['expandedDetail'];"
            [@detailExpand]="row.codeTicket === expandedSymbol ? 'expanded' : 'collapsed'">
        </tr>
    </table>
    <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>

组件.ts：

@Component({
    ...,
    animations: [detailExpand]
})

expandedSymbol: number = null;

toggleExpandableSymbol(symbol: number): void {
        console.log(symbol)
        this.expandedSymbol = this.expandedSymbol === symbol
            ? null
            : symbol;
       

    }

细节Expand.animation.ts：

export const detailExpand = trigger('detailExpand',
    [
        state('collapsed, void', style({ height: '0px', minHeight: '0', display: 'none' })),
        state('expanded', style({ height: '*' })),
        transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
        transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
    ]);

我已经有几个小时了，我对任何帮助或建议都很感兴趣

Answer 1

我也遇到过这个问题，因为我现在需要可扩展+排序，现在 gitHub 的链接可以使用。 https://github.com/angular/components/issues/11990#issuecomment-421075196

在我的情况下，它需要的只是添加

void

，如下所示：

... state('collapsed, void', style({height: '0px', minHeight: '0'})), ...

Answer 2

问题来自属性“display：none”的动画部分，但如果我将其删除，表格行之间的空格就会变得丑陋，如下所示：

在你的CSS中添加这个类：

.disp{
    display:none
}

并将其添加到与可扩展行相对应的标签中：

<td mat-cell class="expandable-row" *matCellDef="let element" [ngClass]="{'disp':element !== expandedElement}" >