如何更改 Angular Material 表中列的方向? [英] How to change the direction of the columns in the Angular Material table?

问题描述

有谁知道这个例子中的表格如何:

解决方案

您可以在类中的 ngOnInit() 方法中使用反转表来给出所需的数据结构，然后迭代HTML 中的列列表以提供所需的列.下面是一个例子:

ts 文件:

import {Component, OnInit} from '@angular/core';/*** @title`<table mat-table>`的基本使用*/@成分({选择器:'表基本示例'，styleUrls: ['table-basic-example.css'],templateUrl: 'table-basic-example.html',})导出类 TableBasicExample 实现 OnInit {inputColumns = ['位置'，'名称'，'重量'，'符号'];输入数据 = ELEMENT_DATA;显示列:字符串[]；显示数据:任何[];显示表:布尔值；ngOnInit() {this.displayColumns = this.inputData.map(x => x.position.toString());this.displayData = this.inputColumns.map(x => this.formatInputRow(x));控制台日志(this.displayColumns)；控制台日志(this.displayData)；this.showTable = true;}格式输入行(行){常量输出 = {};for (let i = 0; i < this.inputData.length; ++i) {输出[this.inputData[i].position] = this.inputData[i][row];}返回输出；}}导出接口 PeriodicElement {名称:字符串；位置:编号；重量:数量；符号:字符串；}const ELEMENT_DATA: PeriodicElement[] = [{位置:1，名称:'氢'，重量:1.0079，符号:'H'}，{位置:2，名称:'Helium'，重量:4.0026，符号:'He'}，{位置:3，名称:'锂'，重量:6.941，符号:'锂'}，{位置:4，名称:'铍'，重量:9.0122，符号:'Be'}，{位置:5，名称:'硼'，重量:10.811，符号:'B'}，{位置:6，名称:'碳'，重量:12.0107，符号:'C'}，{位置:7，名称:'氮'，重量:14.0067，符号:'N'}，{位置:8，名称:'氧气'，重量:15.9994，符号:'O'}，{位置:9，名称:'氟'，重量:18.9984，符号:'F'}，{位置:10，名称:'霓虹'，重量:20.1797，符号:'Ne'}，];/** 版权所有 2018 Google Inc. 保留所有权利.此源代码的使用受 MIT 风格的许可证管理，该许可证可以在 http://angular.io/license */的许可证文件中找到

html 文件:

<!--- 请注意，这些列可以按任何顺序定义.实际呈现的列被设置为行定义上的属性" --><!-- 位置列--><ng-container [matColumnDef]="column" *ngFor="let column of displayColumns"><th mat-h​​eader-cell *matHeaderCellDef>{{ 列 }} <td mat-cell *matCellDef="let element">{{ 元素[列] }} </td></ng-容器><tr mat-h​​eader-row *matHeaderRowDef="displayColumns"></tr><tr mat-row *matRowDef="let row; columns: displayColumns;"></tr><!-- 版权所有 2018 Google Inc.保留所有权利.此源代码的使用受 MIT 风格的许可证管理，该许可证可以在 http://angular.io/license --> 的 LICENSE 文件中找到.

和工作堆栈闪电战:https://stackblitz.com/edit/angular-h6dvzc

编辑的堆栈闪电战:https://stackblitz.com/edit/angular-h6dvzc-jjqdpk

Does anyone know how in the table from this example: https://stackblitz.com/angular/dlxbkjqaoba?file=app%2Ftable-basic-example.ts

Make it so that the columns are directed horizontally, roughly like in the picture:

解决方案

You can use invert the table in an ngOnInit() method in the class to give the required data structure and then iterate over the column list in the HTML to give the required columns. Below is an example:

ts file:

import {Component, OnInit} from '@angular/core';

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample implements OnInit {
  inputColumns = ['position', 'name', 'weight', 'symbol'];
  inputData = ELEMENT_DATA;

  displayColumns: string[];
  displayData: any[];
  showTable: boolean;

  ngOnInit() {
    this.displayColumns = this.inputData.map(x => x.position.toString());
    this.displayData = this.inputColumns.map(x => this.formatInputRow(x));

    console.log(this.displayColumns);
    console.log(this.displayData);

    this.showTable = true;
  }

  formatInputRow(row) {
    const output = {};

    for (let i = 0; i < this.inputData.length; ++i) {
      output[this.inputData[i].position] = this.inputData[i][row];
    }

    return output;
  }
}

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];


/**  Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

html file:

<table mat-table [dataSource]="displayData" class="mat-elevation-z8" *ngIf="showTable">

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container [matColumnDef]="column" *ngFor="let column of displayColumns">
    <th mat-header-cell *matHeaderCellDef> {{ column }} </th>
    <td mat-cell *matCellDef="let element"> {{ element[column] }} </td>
  </ng-container>

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



<!-- Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

and working stackblitz: https://stackblitz.com/edit/angular-h6dvzc

edited stackblitz: https://stackblitz.com/edit/angular-h6dvzc-jjqdpk

这篇关于如何更改 Angular Material 表中列的方向?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！