Angular 4 Material tabla resaltar una fila

En la página ejemplos de la tabla resumen explican el SelectionModel para el manejo de selecciones - que por cierto también maneja la selección múltiple. Me imagino que en el futuro esto es lo que se incorporará en las mejoras futuras, por lo que es una buena idea comenzar a usarlo ahora.

selection es un modelo de selección definido en tu componente. No pude encontrar ninguna documentación real para esto, pero la implementación es extremadamente simple.

selection = new SelectionModel<CustomerSearchResult>(false, null);

El primer parámetro es allowMultiSelect, por lo que para permitir que se seleccionen varios elementos a la vez, establézcalo en true. Cuando false, el modelo de selección deseleccionará cualquier valor existente cuando establezca un nuevo valor.

Luego agregue un evento de clic a select() la fila y cree su propia clase css para cuando se seleccione la fila.

   <mat-table>
        ...

        <mat-row *matRowDef="let row; columns: displayedColumns;"
                 [ngClass]="{ 'selected': selection.isSelected(row)}"
                 (click)="selection.select(row)"></mat-row>

    </mat-table>

La clase css que agregué está a continuación (el ejemplo aún no menciona el estilo) y luego solo necesita agregar a su css

.mat-row {
   min-height: 65px;

   &.selected {
       background: #dddddd;
   }
}

Si su color de fondo es demasiado oscuro, deberá agregar estilos usted mismo para invertir el color del texto.

Para manejar la selección use el evento onChange de selection.

    // selection changed
    this.selection.onChange.subscribe((a) =>
    {
        if (a.added[0])   // will be undefined if no selection
        {
            alert('You selected ' + a.added[0].fullName);
        }
    });

O alternativamente los elementos seleccionados están en this.selection.selected.

Espero que mat-table se mejore para casos comunes como este y no dejen todo en manos del desarrollador. Cosas como eventos de teclado, etc. sería bueno que se manejara automáticamente con respecto al modelo de selección.

Consejo: Tenga en cuenta que si crea su SelectionModel para un seleccione la colección con

selection = new SelectionModel<CustomerSearchResult>(false, []);

Entonces selection.selected.length será realmente 1 y no los elementos esperados 0. No hay comprobación para ver que el elemento pasado en realidad está en el modelo - es una clase muy, muy tonto. Así que ciegamente pone [0] como el elemento seleccionado. Usa null en su lugar. El código fuente deja claro por qué esto ocurre :

if (_isMulti) {
    initiallySelectedValues.forEach(value => this._markSelected(value));
  } else {
    this._markSelected(initiallySelectedValues[0]);
  }

Así que, me encontré con este problema también. Estoy usando el nuevo 'mat -' en lugar de ' md -', pero SUPONGO que será más o menos lo mismo...

<mat-row
    *matRowDef="let row; columns: myColumns; let entry"
    [ngClass]="{ 'my-class': entry.someVal }">
</mat-row>

No lo encontré en ninguna parte, solo lo intenté y resultó que funcionó, así que espero que sea correcto. La gran cosa fue etiquetar 'dejar entrada' al final de las otras cosas matRowDef. Siento llegar tan tarde a la fiesta. Espero que esto le haga bien a alguien.

No tenía identificadores únicos como la columna id en los datos de mi tabla, pero esto funcionó para mí (material 6):

HTML

 <tr mat-row *matRowDef="let row; columns: displayedColumns" 
     (click)="selectedRow = row" [ngClass]="{ 'selected': row === selectedRow }"> 
 </tr>

Añadir variable a TS

selectedRow;

(S)CSS

.selected {
  background-color: red;
}

Si desea hacer más cosas que solo estilo al seleccionar una fila, reemplace (click)="selectedRow = row" con (click)="selectRow(row)" y agregue esta función a su ts:

selectRow(row) {
    this.selectedRow = row;
    // more stuff to do...
}