Angular Mat表可扩展行不'；不要使用10号垫

当我对mat表中的一列进行排序时，我不能再扩展我的行了，只有大约两分之一的行仍然有效。当没有进行排序时，一切正常。 我发现了这个链接： 但这根本解决不了任何问题

component.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>

detailExpand.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)'))
    ]);

export const detailExpand=触发器（'detailExpand'， [ 状态（'collapped，void'，style（{height:'0px'，minHeight:'0'，display:'none'}））， 状态（'expanded'，样式（{height:'*'}））， 过渡（“展开折叠”，动画（“225ms立方贝塞尔（0.4,0.0,0.2,1）”， 过渡（“展开的空心”，动画（“225ms立方贝塞尔（0.4,0.0,0.2,1）） ]);

---

我已经在上面呆了几个小时了，我对任何帮助或建议都感兴趣

问题来自属性“display:none”的动画部分，但是如果我将其删除，我的表格行之间的空格会变得像这样难看：

在css中添加此类：

.disp{
    display:none
}

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

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

```

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