Мат-таблица с заголовками в два ряда, используя Angular 8

Question

Я показываю информацию в таблице, используя mat-table. У меня есть что-то вроде этого:

таблица материалов

с этим HTML:

  <div class="container">
   <div class="mat-elevation-z8">
    <table #dataTable mat-table [dataSource]="dataSource">
      <ng-container class="ng-hide" matColumnDef="$key">
        <th class="ng-hide" mat-header-cell *matHeaderCellDef>ID del Paciente</th>
        <td class="ng-hide" mat-cell *matCellDef="let element"> {{element.$key}} </td>
      </ng-container>

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

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

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

      <ng-container matColumnDef="fecha_nacimiento">
        <th mat-header-cell *matHeaderCellDef> Fecha de Nacimiento </th>
        <td mat-cell *matCellDef="let element"> {{element.fecha_nacimiento | date: "dd/MM/yyyy" }</td>
      </ng-container>

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

      <ng-container matColumnDef="numero_os">
        <th mat-header-cell *matHeaderCellDef> Número de Obra Social </th>
        <td mat-cell *matCellDef="let element"> {{element.numero_os}} </td>
      </ng-container>

      <ng-container matColumnDef="telefono">
        <th mat-header-cell *matHeaderCellDef> Número de teléfono </th>
        <td mat-cell *matCellDef="let element"> {{element.telefono}} </td>
      </ng-container>

      <ng-container matColumnDef="telefono_contacto">
        <th mat-header-cell *matHeaderCellDef> Teléfono de Contacto </th>
        <td mat-cell *matCellDef="let element"> {{element.telefono_contacto}} </td>
      </ng-container>

      <ng-container matColumnDef="accion">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element; let i = index;">
          <button mat-raised-button color="primary" class="push-right"
            [routerLink]="['/PacienteEdita/', element.$key]">Editar</button>
          <button mat-raised-button color="warn" (click)="deletePaciente(i, element)">Eliminar</button>
        </td>
      </ng-container>

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

    </table>
  </div>
</div>

и этим TS:

import { Component, OnInit, ViewChild } from '@angular/core';
import { Paciente } from './../../shared/paciente';
import { MatTableDataSource, MatTable } from '@angular/material';
import { PacienteService } from './../../shared/paciente.service';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-pacientes-detalle',
  templateUrl: './pacientes-detalle.component.html',
  styleUrls: ['./pacientes-detalle.component.css']
})
export class PacientesDetalleComponent implements OnInit {
  id: any;
  element: Paciente;
  dataSource: MatTableDataSource<Paciente[]>;
  displayedColumns: any[] = [
    '$key',
    'nombre_paciente',
    'apellido_paciente',
    'dni',
    'fecha_nacimiento',
    'obra_social',
    'numero_os',
    'telefono',
    'telefono_contacto',
    'accion'
  ];
  @ViewChild('dataTable',{ static:false }) dataTable: MatTable<any>;
  constructor(
    private actRoute: ActivatedRoute, 
    private pacienteApi: PacienteService
    ) { 
  }

  ngOnInit() {
    this.id = this.actRoute.snapshot.paramMap.get('id');
    this.pacienteApi.GetPaciente(this.id).valueChanges().subscribe(data => {
      /* Data table */
      this.element = data;
      this.element.$key = this.id;
      this.dataSource = new MatTableDataSource<Paciente[]>([data]);
    })
  }
}

Я пытаюсь получить, используя mat-table и angular 8, что-то вроде этого:

таблица без материала

Проблема в том, что я не может заставить его работать с displayColumns. Я пытался использовать два разных отображаемых столбца, но у меня это не сработало.

Есть предложения?

Answer 1

Спасибо за ответы и помощь. Наконец я решил эту проблему, создав общую таблицу и добавив к ней материал CSS!

Answer 2

может быть, это может помочь.

<ng-container matColumnDef="nombre_paciente">
    <td mat-cell *matCellDef="let element"> 
       <div class="inner-col-header">Nombre<div>
       <div class="inner-col-data">{{element.nombre_paciente}}<div>
       <div class="inner-col-header">Obra Social<div>
       <div class="inner-col-data">{{element.obra_social}}<div>
    </td>
</ng-container>

Вы можете отформатировать данные с помощью классов inner-col-data и inner-col-header и избавиться от неиспользуемых столбцов (в данном случае Obra Social)