【发布时间】：2020-02-19 13:39:31
【问题描述】：
我正在使用 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 得到类似这样的东西：
问题是我无法让它与displayedColumns 一起使用。我尝试使用两个不同的显示列，但对我不起作用。
有什么建议吗？
【问题讨论】：
标签： angular angular-material angular8 mat-table