垂直表头表格 Angular Material

Question

在这个例子中（https://stackblitz.com/edit/angular-ivy-xtyoyq?file=src/app/app.component.ts），我们有一个基本表格，但在我的情况下，我想把这个表格做成这样：

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>

please help!!

- Aziz bouchtaoui

Answer 1

您可以在类的ngOnInit()方法中使用反转表格来提供所需的数据结构，然后在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'},
];

工作示例 在此处查看

- Sumit Sharma

---

你好Sumit先生，感谢您的帮助， 我用另一种方法做了这个：<table class="table table-striped"> <tbody *ngFor="let item of displayedColumns"> <tr > <th scope="row">{{item}}</th> <td *ngFor="let data of KPIDataSource " class="DateRow" > - Aziz bouchtaoui

抱歉，我是Stack Overflow的新手，感谢您的帮助。我做了这个：<table class="table table-striped"> <tbody *ngFor="let item of displayedColumns"> <tr> <!-- 表头行 --> <th scope="row">{{item}}</th> <!-- 表格主体 --> <td *ngFor="let data of DataSource" class="DateRow">{{data}}</td> </tr> </tbody> </table> 但问题是，当我想要像第一行或第三行那样给我的表格设置红色背景时，由于只有一个td，我无法对表格进行样式设置。您有什么想法吗？ - Aziz bouchtaoui

将以下代码放入你的CSS文件中：tr:nth-child(odd) { background-color: red; }。 - Sumit Sharma

他将所有的<tr>都变成了红色，因为我们只有一个<tr>。 - Aziz bouchtaoui

尝试使用 <td> 进行操作。 - Sumit Sharma

它可以与tbody一起工作 ^-^ 谢谢 - Aziz bouchtaoui

Answer 2

需要覆盖 Angular Material 的样式，将样式应用于全局文件中，以便可以覆盖它。如果在组件中应用，则由于视图封装而无法工作。 注意：永远不要在任何文件中使用 ng-deep。

- Muhammad Azeem Saleem

---

我不明白如何使用ng-container来完成它，你能帮我吗？ - Aziz bouchtaoui