Wie kann ich flex Layout für eine versteckte Winkelmaterialklasse

Question

In einem Winkel cli dev Umgebung ausschalten ich ein Gitter Liste Komponente mit einer einzelnen Kachel, in einer Datei mit dem Namen Layout-grid.component.html erstellt haben :

<md-grid-list cols="4" rowHeight="100px"> 
    <md-grid-tile 
     *ngFor="let tile of tiles" 
     [colspan]="tile.cols" 
     [rowspan]="tile.rows" 
     [style.background]="tile.color"> 
    <app-splash></app-splash> 
    </md-grid-tile> 
</md-grid-list> 

die Gitterfliese eine Komponente hat eingebettet in dem app-splash genannt, die ein einziges Bild enthält:

<img src="../assets/horse.jpg" alt="Horse"> 

Wenn ich den Web-App laufe, sehe ich das Bild in der Mitte der Fliese, aber mit einer Lücke um die Kante. Ich möchte, dass der IMG die Kachel füllt. Mit Hilfe der Inspektor mit Chrome, ich habe festgestellt, dass die Täter die verborgenen Klassen sind:

.mat-grid-tile .mat-figure { 
    align-items:center; 
    bottom:0; 
    display:flex; 
    height:100%; 
    justify-content:center; 
    left:0; 
    margin:0; 
    padding:0; 
    position:absolute; 
    right:0; 
    top:0; 
} 

und wenn ich die Anzeige aus: flex Eigenschaft Ich bekomme das Ergebnis, das ich brauche. Wie schalte ich es in meinem Code aus? Wenn Sie die CSS-Komponente für die Rasterlistenkomponente auf Inline setzen, wird nichts ausgeführt. Muss ich das Typoskript ändern? Layout-grid.component.ts ist wie folgt:

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-layout-grid', 
    templateUrl: './layout-grid.component.html', 
    styleUrls: ['./layout-grid.component.css'] 
}) 
export class LayoutGridComponent implements OnInit { 

    tiles = [ 
    {text: 'One', cols: 4, rows: 10, color: 'lightblue'}, 
    ]; 

    constructor() { } 

    ngOnInit() { 
    } 

Answer 1

In /layout-grid.componet.css hinzufügen:

::ng-deep md-grid-tile.mat-grid-tile .mat-figure { 
    display: block !important; /* or whichever you need */ 
} 

Dies wird die in Winkelmaterial CSS überschreiben.