我想创建带有可扩展行的表。像这样: https://stackblitz.com/angular/oyybnyopyemm?file=app%2Ftable-expandable-rows-example.ts
在我的表格中,所有行都在单击后立即打开和关闭。例如,我不能只展开(打开)一行。
我的* .html
<div *ngIf="clients$ | async as clients">
<div class="flex-p">
<table mat-table [dataSource]="clients.content" class="mat-elevation-z8" multiTemplateDataRows>
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.id }} </mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.name }} </mat-cell>
</ng-container>
<ng-container matColumnDef="email">
<mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.email }} </mat-cell>
</ng-container>
<ng-container matColumnDef="vehicles">
<mat-header-cell *matHeaderCellDef> pojazdy </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.vehicles }} </mat-cell>
</ng-container>
<ng-container matColumnDef="update">
<mat-header-cell *matHeaderCellDef> Zmien Dane </mat-header-cell>
<mat-cell *matCellDef="let element">
<button (click)="update(element)" mat-icon-button color="primary">
<mat-icon>update</mat-icon>
</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="addVehicle">
<mat-header-cell *matHeaderCellDef> Dodaj pojazd </mat-header-cell>
<mat-cell *matCellDef="let element">
<button (click)="addVehicle()" mat-icon-button color="primary">
<mat-icon>directions_car</mat-icon>
</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="delete">
<mat-header-cell *matHeaderCellDef> Usun </mat-header-cell>
<mat-cell *matCellDef="let element">
<button (click)="delete(element.id)" mat-icon-button color="warn">
<mat-icon>delete_forever</mat-icon>
</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<mat-cell *matCellDef="let detail">
{{detail.name}}
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row"
[class.expanded]="expandedElement == row"
(click)="expandedElement === row? expandedElement = null : expandedElement = row"></mat-row>
<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
[@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'" style="overflow: hidden">
</mat-row>
</table>
<div>
<div style="display:inline">
<button (click)="openModal()" type="submit" class="button" mat-raised-button color="primary">
Dodaj klienta
</button>
</div>
<div style="display:inline">
<mat-paginator (page)="changePage($event)" [length]="clients.totalElements" [pageSize]="clients.size"
[pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
</div>
</div>
</div>
我的* ts
@Component({
selector: 'app-client-list',
templateUrl: './client-list.component.html',
styleUrls: ['./client-list.component.scss'],
animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
state('expanded', style({ height: '*', visibility: 'visible' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
]
})
export class ClientListComponent implements OnInit {
displayedColumns: string[] = ["id", "name", "email", "vehicles", "update", "addVehicle", "delete"]
expandedElement: any
isExpansionDetailRow = (i: number, row: Object) => {
return row.hasOwnProperty('name');
}
@Select(state => state.client.pageClientDto)
clients$: Observable<PageClientDto>
constructor(public store: Store, public matDialog: MatDialog) { }
ngOnInit() {
this.store.dispatch(new ClietnPageAction(0, 5))
}
changePage(event) {
this.store.dispatch(new ClietnPageAction(event.pageIndex, event.pageSize))
}
我应该在哪里寻找错误。
答案 0 :(得分:0)
您需要更新此部分
[@detailExpand]="(element == expandedElement || allRowsExpanded) ? 'expanded' : 'collapsed'"
看看这个