Esta pregunta se puede resolver de diversas maneras, por lo tanto te dejamos la que para nosotros es la resolución más completa.
Solución:
Como lo menciona aquí Andrew Seguin, esto ya es factible listo para usar: usar el when predicado.
Vea este ejemplo: https://stackblitz.com/edit/angular-material-expandable-table-rows (gracias a Lakston)
dentro de la mat-table etiqueta tienes que usar el mat-row componente con un matRipple directiva. Al hacer clic en una fila, el elemento de la fila se asignará al expandedElement variable:
Pero ahora tenemos que agregar nuestra fila expandida, que está oculta por defecto y se mostrará si el usuario hace clic en la fila de arriba:
Importante es aquí lo ya mencionado when predicado. Esto llama un isExpansionDetailRow función que se define en el propio componente y comprueba si la fila tiene un detailRow propiedad:
isExpansionDetailRow = (row: any) => row.hasOwnProperty('detailRow');
Desde RC0 el primer parámetro es el índice:
isExpansionDetailRow = (i: number, row: any) => row.hasOwnProperty('detailRow');
Si desea tener una vista ampliada para cada fila, debe agregar una “ExpansionDetailRow” identificada por el detailRow propiedad para cada fila como esta:
connect(): Observable
const rows = [];
data.forEach(element => rows.push(element, detailRow: true, element ));
return Observable.of(rows);
Si registrara el rows variable a la salida de la consola, se verá así:
EDITAR: EJEMPLO COMPLETO USANDO LA DIRECTIVA
Filas expandibles de Mat Table (ordenación, paginación y filtrado)
No es posible de fábrica, pero puede resolverlo con un pequeño código personalizado. Eche un vistazo a esta discusión y esta solución (no de mí, pero la base de esta respuesta).
En resumen: use la tabla de materiales y agregue un método de clic a las filas:
Agregue un componente para el área expandida. los row_detail.html contiene el html que se encuentra en el área expandida.
@Component(
selector: 'app-inline-message',
templateUrl: 'row_detail.html',
styles: [`
:host
display: block;
padding: 24px;
background: rgba(0,0,0,0.03);
`]
)
export class InlineMessageComponent
@Input() content1: string;
@Input() content2: string;
En su componente donde vive la tabla, necesita el método para expandir la fila. Primero, agregue esto a su componente…
expandedRow: number;
@ViewChildren('myRow', read: ViewContainerRef ) containers;
… y luego agregue el método:
/**
* Shows the detail view of the row
* @param number index
*/
expandRow(index: number, row: DataFromRowFormat)
if (this.expandedRow != null)
// clear old message
this.containers.toArray()[this.expandedRow].clear();
if (this.expandedRow === index)
this.expandedRow = null;
else
const container = this.containers.toArray()[index];
const factory: ComponentFactory = this.resolver.resolveComponentFactory(InlineMessageComponent);
const messageComponent = container.createComponent(factory);
messageComponent.instance.content1= "some text";
messageComponent.instance.content2 = "some more text";
Cuando CDK era la única manera de conseguir algo parecido a un Material Tableutilizando md-row‘s en una mesa regular era una alternativa viable, pero dado que @angular/material 2.0.0-beta.12 abandonado CDK y ahora tienen sus propias tablas de datos que pueden satisfacer sus necesidades. Consulte la documentación a continuación:
https://material.angular.io/components/table/overview
Valoraciones y comentarios
Te invitamos a añadir valor a nuestra información cooperando tu veteranía en las críticas.