2017-09-11 23 views
3

Wenn md-sort-header in md-header-cell in md-table hinzugefügt wird, ist es immer linksbündig. Wie zentrieren Sie Header-Zellen, wie "Name"?eckiges Material 2 Tabellenkopfzentralausrichtung

<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> Name </md-header-cell> 

plnkr

Antwort

2

md-header-cell mit class = "mat-Art-header-Container" auf einen Behälter bekommen 'übersetzt'. Verwenden Sie diesen Stil mit ng-deep. So setzen Sie folgende in dem Komponenten Sheet:

entweder:

::ng-deep .mat-sort-header-container { 
    display:flex; 
    justify-content:center; 
} 

oder

mat-header-cell { 
    display:flex; 
    justify-content:flex-end; 
    } 

DEMO

+0

Werfen Sie einen Blick auf meine Antwort für zukünftige Referenz in Bezug auf ähnliche Probleme, +1 für die Antwort. – Faisal

2

Die akzeptierte Antwort ist richtig. ::ng-deep wird jedoch abgeschrieben und möglicherweise in Zukunft gelöscht (official documentation).

Der Schatten durchdringende Nachkomme Kombinator ist veraltet und Unterstützung ist aus den wichtigsten Browsern und Tools entfernt. Daher planen wir, Unterstützung in Angular (für alle 3 von/deep /, >>> und :: ng-deep) fallen zu lassen. Bis dann :: ng-deep sollte für eine breitere Kompatibilität mit die Werkzeuge bevorzugt werden.

Der richtige Weg ist die Verwendung ViewEncapsulation. In Ihrem component.ts, fügen Sie folgendes:

import { ViewEncapsulation } from '@angular/core'; 

@Component({ 
    .... 
    encapsulation: ViewEncapsulation.None 
}) 

und die Klasse in Ihrer component.css Datei überschreiben:

.mat-sort-header-container { 
    display:flex; 
    justify-content:center; 
} 
+0

: ng-deep ist nicht entzogen! es ist/tief/nur. Kapselung kann andere Klassen beeinflussen – Vega

+1

Bitte lesen Sie die Dokumentation: 'Der Shadow-Piercing-Nachfolger-Kombinator ist veraltet und die Unterstützung wird von den wichtigsten Browsern und Tools entfernt. Daher planen wir, die Unterstützung in Angular (für alle 3 von/deep /, >>> und :: ng-deep) fallenzulassen. – Faisal

+0

@Vega, ich sage nicht, dass Ihre Antwort nicht funktioniert, die OP möglicherweise konfrontiert ein Problem in der Zukunft, sobald '' ng-deep' 'komplett fallengelassen wird. – Faisal

0

Ich denke, die gegebenen Lösungen für das Problem zu streng sind in ihrem Ansatz, Ich hatte ein ähnliches Problem, wo ich einige CSS-Eigenschaften von mat-sort-header-container ändern musste, aber dynamisch.

Ich habe so etwas wie Vega Antwort aber minutiös verschiedene, wie Arten gesetzt werden:

::ng-deep .mat-sort-header-container{ 
    justify-content: inherit; 
    /* other inheritable properties */ 
} 

, dem Stil einige Eigenschaften für seine Eltern öffnen mat-header-cell, die in Ihrem HTML-Code ist also, was Art bieten Sie in mat-header-cell und in der ng-deep, die von seinem Elternteil erbt, dann würden nur diese Stile und keine andere als diese Hierarchie gehen.