垂直标题 table Angular material

Question

在这个例子中， ( https://stackblitz.com/edit/angular-ivy-xtyoyq?file=src/app/app.component.ts ), 我们有基本的 table，但就我而言，我想像这样制作 table :

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}

<table style="width:100%">
<tr>
    <th>No.</th>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <th>Name</th>
    <td>Hydrogen</td>
    <td>Helium</td>
    <td>Lithium</td>
    <td>Beryllium</td>
            
  </tr>
  <tr>
    <th>Weight</th>
    <td>1.0079</td>
    <td>4.0026</td>
    <td>6.941</td>
    <td>9.0122</td>
  </tr>
   <tr>
    <th>Symbol</th>
    <td>H</td>
    <td>He</td>
    <td>Li</td>
    <td>Be</td>
  </tr>
</table>

请帮忙！！

Answer 1

需要覆盖 angular material 的样式，在全局文件中应用样式以便它可以覆盖它。如果您在组件中应用，由于视图封装，它将无法工作。注意：切勿在任何文件中使用 ng-deep。

Answer 2

您可以在 class 中的 ngOnInit() 方法中使用反转 table 来提供所需的数据结构，然后遍历 HTML 中的列列表给出所需的列。下面是一个例子：

Html 文件:

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

  <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>

TS 文件:

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

@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'},
];

工作示例 here

垂直标题 table Angular material

Vertical Headings table Angular material

html

css

angular

angular-material

angular-material-table