javascript - 表 cdk 和 mat-tabs-group 的错误

问题描述

我有角材料表的问题。我制作了一个表格并实现了排序、分页器、mat-tabs-group 和可扩展行。但是当我第一次显示至少 10 个元素并按名称排序时，出现错误，行扩展自身。

当它在 mat-tabs 中时，我有这个问题，但在外面没有。我认为这是表 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>

这是错误

标签： javascriptangularangular-material

javascript - 表 cdk 和 mat-tabs-group 的错误

问题描述

解决方案

推荐阅读