angular - mat-card examples

Hilera de mesas expandibles en angular 4 con material angular.

Question

¿Cómo harías filas expandibles en tablas de material angular? Un requisito es que necesito usar la tabla de material angular . También preferiría usar el material de acuerdo con la información here provista.

Quiero hacer clic en la fila y mostrar información diferente para cada columna. Estoy buscando algo como abajo. Si hace clic en la fila 1, las filas 2 y 3 aparecen con datos diferentes.

Answer 1

Aquí es cómo puedes hacerlo con material angular. Este ejemplo incluye la paginación y un ejemplo con mat-sort-header en la columna ''nombre''. Tuve que anular el paginador mat y hacer una ordenación personalizada para asegurarme de que la fila expandible aún estaba por su padre cuando se ordenó. Este ejemplo también le permite abrir varias filas a la vez y cerrar todas las filas

https://stackblitz.com/edit/angular-material2-issue-zs6rfz

Answer 2

Cuando CDK era la única forma de acercarse a una Material Table , usar md-row ''s en una tabla regular era una alternativa viable, pero dado que @angular/material 2.0.0-beta.12 abandonó las tablas de CDK y ahora tiene su propias tablas de datos que pueden adaptarse a sus necesidades. Vea la documentación a continuación:

https://material.angular.io/components/table/overview

Answer 3

No es posible fuera de la caja, 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:

<md-row *mdRowDef="let row; columns: displayedColumns; let index=index" (click)="expandRow(index, row)" #myRow></md-row>

Agregar un componente para el área expandida. El row_detail.html contiene el html que está 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 agrega 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<InlineMessageComponent> = this.resolver.resolveComponentFactory(InlineMessageComponent);
      const messageComponent = container.createComponent(factory);

      messageComponent.instance.content1= "some text";
      messageComponent.instance.content2 = "some more text";
    }
}

Answer 4

Como lo mencionó Andrew Seguin, esto ya es factible fuera de la caja: usar el predicado when .

Vea este ejemplo: https://stackblitz.com/edit/angular-material-expandable-table-rows (gracias a Lakston)

Dentro de la etiqueta mat-table tienes que usar el componente mat-row con una directiva matRipple . Al hacer clic en una fila, el elemento de la fila se asignará a la variable expandedElement :

<mat-row *matRowDef="let row; columns: displayedColumns;"
        matRipple 
        class="element-row" 
        [class.expanded]="expandedElement == row"
        (click)="expandedElement = row">
</mat-row>

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:

<mat-row *matRowDef="let row; columns: [''expandedDetail'']; when: isExpansionDetailRow"
        [@detailExpand]="row.element == expandedElement ? ''expanded'' : ''collapsed''"
        style="overflow: hidden"> 
</mat-row>

Importante es aquí el ya mencionado when predicate. Esto llama a una función isExpansionDetailRow que está definida en el propio componente y comprueba si la fila tiene una propiedad detailRow :

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 expandida para cada fila, debe agregar una "ExpansionDetailRow" identificada por la propiedad detailRow para cada fila como esta:

connect(): Observable<Element[]> {
    const rows = [];
    data.forEach(element => rows.push(element, { detailRow: true, element }));
    return Observable.of(rows);
}

Si desea registrar la variable de las rows en la salida de la consola, se verá así:

EDITAR: EJEMPLO COMPLETO USANDO DIRECTIVA

Mat Mat filas expandibles (clasificación, paginación y filtrado)