Question

我正在尝试遵循此处给出的Angular材质表- https://material.angular.io/components/table/overview

我正在使用ngFor显示displayedColumns中的所有可用列。因此，对我来说硬编码列名不是一个选择。

虽然我了解如何使用displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];选择要显示的列，但是呈现表时如何更改显示名称？我表中的一些名称很长，并且弄乱了表的渲染。

Answer 1

只需创建具有必要数据的定义，然后循环这些数据即可。我为您创建了一个堆叠闪电战：https://stackblitz.com/edit/angular-ykrghm

以下是重要部分：

addEventListener()

-

  <ng-container *ngFor="let def of tableDef">
<ng-container [matColumnDef]="def.key">
  <th mat-header-cell *matHeaderCellDef> {{def.header}} </th>
  <td [ngClass]="def.className" mat-cell *matCellDef="let element"> {{element[def.key]}} </td>
</ng-container>

Answer 2

正如您在发布的链接的第一个示例中看到的那样，您可以在模板中轻松设置显示的标题名称（此处，列position的显示的标题名称为否。< / strong>）：

 <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef> No. </th> <td mat-cell *matCellDef="let element"> {{element.position}} </td> </ng-container>

Answer 3

在这种情况下，您必须添加一个单元格渲染器方法来检查组件中渲染的字符串长度，并且在该方法内部，您可以执行任何操作。或者，您也可以通过CSS属性“ text-overflow：省略号... ETC”来省略文本

如果要显示原始值，可以在单元格的悬停上添加一个工具提示。

// HTML

<ng-container matColumnDef="symbol">
  <th mat-header-cell *matHeaderCellDef> Symbol </th>
   // Like checkStringLength() method
  <td mat-cell *matCellDef="let element"> {{checkStringLength(element.symbol)}} </td>
</ng-container>

//方法

 checkStringLength(value:string){
   // Your logic 
   if(value.length < 30){
       Return value
     }else{
       // Here you can write your logic
       Return "Custom Value"
    }
}

Answer 4

我解决了与

相同的问题

<table mat-table class="lmat-elevation-z8" [dataSource]="dataSource" matSort matSortActive="Range" matSortDirection="asc" matSortDisableClear>
    <ng-container *ngFor="let dispCol of displayedColumns; let colIndex = index" matColumnDef="{{dispCol.key}}">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{dispCol.header}}</th>
        <td mat-cell *matCellDef="let element" class="mat-column-vinCode">{{element[dispCol.key]}}</td>
    </ng-container>


    <tr mat-header-row *matHeaderRowDef="displayedColumnsKeys; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumnsKeys"></tr>
</table>

在组件中

export class RawSignalsContainerComponent implements OnInit{
constructor() { }

@Input() dataSource: Array<SignalCount>;
displayedColumns: Array<any>;
displayedColumnsKeys: string[];

ngOnInit() {
  displayedColumns= [
      {
        key: 'range',
        header: 'Range'
      },
      {
        key: 'lowRange',
        header: 'Low Range'
      },
      {
        key: 'highRange',
        header: 'High Range'
      },
      {
        key: 'populationSize',
        header: 'Population Size'
      },
      {
        key: 'populationPerc',
        header: '% of Population'
      }
    ];
  this.displayedColumnsKeys = this.displayedColumns.map(col => col.key);
}

在这里，作为输入传递给组件的dataSource是具有displayColumns所有键的对象数组。即

export interface SignalCount{
range:string;
lowRange:number;
highRange:number;
populationSize:number;
populationPerc:number;
}

如何在Angular材质表中更改标题显示文本？

4 个答案: