Question

当我对垫子表的一列进行排序时，我无法再继续扩展行，只有大约两分之一仍然有效。尽管没有排序，但一切正常。我碰到了此链接：https://github.com/angular/components/issues/11990#issuecomment-421075196 但这根本解决不了什么

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>

component.ts：

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

expandedSymbol: number = null;

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

    }

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

我已经满足上述要求几个小时了，对我的帮助或建议很感兴趣

Answer 1

问题出在属性“ display：none”的动画部分，但是如果我将其删除，则表行之间的空格将变得难看：

在您的CSS中添加此类：

.disp{
    display:none
}

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

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

垫表可扩展行不适用于垫排序Angular 10

1 个答案: