34 votos

La tabla de materiales de Angular 4 resalta una fila

Estoy buscando una buena manera de resaltar toda una fila en md-table.
¿Debo hacer la directiva o qué?
¿Alguien puede ayudarme con esto?

<div class="example-container mat-elevation-z8">
  <md-table #table [dataSource]="dataSource">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- ID Column -->
    <ng-container cdkColumnDef="userId">
      <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container cdkColumnDef="progress">
      <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container cdkColumnDef="userName">
      <md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
      <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
    </ng-container>

    <!-- Color Column -->
    <ng-container cdkColumnDef="color">
      <md-header-cell *cdkHeaderCellDef>Color</md-header-cell>
      <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
    </ng-container>

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
  </md-table>
</div>

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

50voto

Nehal Puntos 7827

Actualización para la nueva versión del material (md --> mat):

html:

<!-- Add the highlight class in row definiton of md-table -->
<!-- Add click event to pass the selected row index -->

<mat-row *cdkRowDef="let row; columns: displayedColumns;" 
         [ngClass]="{'highlight': selectedRowIndex == row.id}"
         (click)="highlight(row)">
</mat-row>

Respuesta original:

Puede hacerlo utilizando ngClass y una bandera como selectedRowIndex . Siempre que el índice de fila pulsado sea igual a selectedRowIndex se aplicará la clase.

Demostración de Plunker

html:

<!-- Add the highlight class in row definiton of md-table -->
<!-- Add click event to pass the selected row index -->

<md-row *cdkRowDef="let row; columns: displayedColumns;" 
         [ngClass]="{'highlight': selectedRowIndex == row.id}"
         (click)="highlight(row)">
</md-row>

css:

.highlight{
  background: #42A948; /* green */
}

ts:

selectedRowIndex: number = -1;

highlight(row){
    this.selectedRowIndex = row.id;
}

26voto

Simon_Weaver Puntos 31141

En el ejemplos de cuadros generales página explican el SelectionModel para manejar las selecciones, que por cierto también maneja la multiselección.

selection es un SelectionModel definido en su componente. No pude encontrar ninguna documentación real para esto, pero el aplicación es extremadamente simple.

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

El primer parámetro es allowMultiSelect para permitir que se seleccionen varios elementos a la vez. Si es falso, el modelo de selección deseleccionará cualquier valor existente cuando se establezca un nuevo valor.

A continuación, añada un evento de clic a select() la fila y crear su propia clase css para cuando la fila es seleccionada.

   <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 añadí está abajo (la muestra no menciona el estilo todavía) y luego sólo tienes que añadir a tu css

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

   &.selected {
       background: #dddddd;
   }
}

Si su color de fondo es demasiado oscuro, tendrá que añadir estilos usted mismo para invertir el color del texto.

Para manejar la selección utilice el onChange evento 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 bien, los elementos seleccionados están en this.selection.selected .

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

6voto

Zuzze Puntos 61

No tenía identificadores únicos como la columna id en los datos de mi tabla pero esto me funcionó (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 quiere hacer algo más que estilizar al seleccionar una fila, sustituya (click)="selectedRow = row" con (click)="selectRow(row)" y añada esta función a su ts:

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

3voto

Nick Landkamer Puntos 31

Yo también me encontré con este problema. Estoy usando el nuevo 'mat-' en lugar de 'md-', pero supongo que será lo mismo...

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

No lo he encontrado en ningún sitio, simplemente lo he probado y me ha salido bien, así que espero que sea así. La gran cosa fue etiquetar 'let entry' al final de las otras cosas de matRowDef. Siento llegar tan tarde a la fiesta. Espero que esto le sirva a alguien.

2voto

Priya Puntos 21

Para el material": "^7.0.3",

utilizar el nombre css en html, sin la comilla simple, para resaltar la fila

 .mat-row.highlighted {
  background: lightblue;
  }

<tr mat-row *matRowDef="let row; columns: displayedColumn;" 
[ngClass]="{highlighted: selectedRowIndex == row.id}"  (click)="highlight(row)" > 
</tr>

highlight(row){
this.selectedRowIndex = row.id;
}

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X