angular - item - mattabledatasource

Tabla de material angular 4 resaltar una fila

Question

Estoy buscando una buena manera de iluminar toda una fila en md-table.
¿Debo hacer directivas o qué?
¿Alguien me puede ayudar 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

Answer 1

En la página de https://material.angular.io/components/table/overview la https://material.angular.io/components/table/overview , explican el SelectionModel para manejar las selecciones, que por cierto también maneja la selección múltiple. Me imagino que seguir adelante es lo que se incorporará en las mejoras futuras, por lo que es una buena idea comenzar a usarlo ahora.

selection es un SelectionModel definido en su componente. No pude encontrar ninguna documentación real para esto, pero la implementation 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, allowMultiSelect en verdadero. Cuando es falso, el modelo de selección anulará la selección de los valores existentes cuando establezca un nuevo valor.

Luego, agregue un evento de clic para 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 de css que agregué está abajo (la muestra no menciona aún el estilo) y luego solo necesitas agregarla a tu css.

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

   &.selected {
       background: #dddddd;
   }
}

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

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

    // 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 que no se limiten a dejar todo en manos del desarrollador. Las cosas como los eventos del teclado, etc., serían agradables para ser manejadas automáticamente con respecto al modelo de selección.

Sugerencia: tenga en cuenta que si crea su SelectionModel para una colección no múltiple con

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

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

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

Answer 2

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>

agregar variable a TS

selectedRow;

(S) CSS

.selected {
  background-color: red;
}

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

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

Answer 3

Por lo tanto, me encontré con este problema también. Estoy usando el nuevo ''mat-'' en lugar de ''md-'', pero estoy adivinando que será casi lo mismo ...

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

No lo encontré en ninguna parte, simplemente lo probé y resultó que funcionó, así que espero que sea así. Lo importante fue etiquetar ''dejar entrada'' al final de las otras cosas de matRowDef. Perdón por llegar tan tarde a la fiesta. Esperemos que esto le haga bien a alguien.

Answer 4

Actualización para la versión más nueva 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 usando ngClass y una bandera como selectedRowIndex . Cada vez que se haga clic en el índice de la fila es igual a selectedRowIndex , la clase se aplicará.

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;
}