У меня проблема с таблицей угловых материалов.Я создал таблицу и реализовал сортировку, разбиение на страницы, mat-tabs-group и расширяемую строку.Но когда я сначала отображаю как минимум 10 элементов и сортирую по имени, появляется ошибка, строка расширяется.
Когда она находится на вкладках матов, у меня возникает эта проблема, а снаружи нет.Я думаю, что это проблема с таблицей cdk и mat-tabs-group.
У меня был Gif, чтобы увидеть ошибку
Я вставляю часть моего HTML & Ts здесь:
........
@ViewChild(MatSort, {static: true}) sort: MatSort;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
constructor(private lightService: LightService, public dialog: MatDialog) {
}
ngOnInit() {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.lightService.getLamp()
.subscribe(
(response) => {
this.lampData = response;
this.dataSource.data = response;
},
(error) => {
console.log('error ' + error);
}
);
}
.....
HTML
......
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
<div class="example-element-detail" *ngIf="element.error"
[@detailExpand]="element === expandedElement ? 'expanded' : 'collapsed'">
<div>
<p>serial : <strong>{{element.serial}} </strong></p>
<p> {{element.name}} have a problem.</p>
<p (click)="openDialog()" class="technician">Error message</p>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"></tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row" ></tr>
</table>
<mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
</div>
</div>
Это ошибка