Question

我有一个mat-table我想自动调整列宽，任何人都会有最长的列内容。

//Arrange
ChildClassTestable child = new ChildClassTestable {SumOfParentReturnValue = 20};

//Act
int result = child.Sum();

//Assert
Assert.AreEqual(21, result);

数据示例：

<mat-table #table [dataSource]="dataSource">

 <ng-container matColumnDef="email">
  <mat-header-cell *matHeaderCellDef class="myHeader"> No. </mat-header-cell>
  <mat-cell *matCellDef="let element" class="myCell"> {{element.email}} </mat-cell>
 </ng-container>

 <ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef class="myHeader"> Name </mat-header-cell>
  <mat-cell *matCellDef="let element" class="myCell"> {{element.name}} </mat-cell>
 </ng-container>

</mat-table>

因此，宽度单元格足以用于“longmailaddress@longmailaddres.com”和“此人的长名”。

我的选择不起作用，我尝试使用FxFlexFill和fxFlex unsucced这是我的css unsucced选项。

const DATA: Data[] = [
 {email: 'mail1@mail.com', name: 'Long name for this person'},
 {email: 'mail2@mail.com': 'name2',
 {email: 'longmailaddres@longmailaddress.com: 'name3'}
];

有人能帮助我吗？

Answer 1

你现在可能已经解决了这个问题，但是在这里发布给其他可能遇到此问题的人。

我用这个作为参考： https://github.com/angular/material2/issues/5808

它不是自动调整大小的列，但这是您在特定mat-table列上设置宽度的方法（默认情况下内容换行）：

mat-cell:nth-child(1),
mat-header-cell:nth-child(1) {
    flex: 0 0 30%;
}

mat-cell:nth-child(5),
mat-header-cell:nth-child(5) {
    flex: 0 0 10%;
}

如果您想使用自动调整大小，则必须根据此问题的解决方案使用本机<table>： https://github.com/angular/material2/issues/5866

mat-table自动适合列宽到更大的内容

1 个答案: