it-swarm.com.de

Spaltenwerte in der Mat-Grid-Liste für eckiges Material dynamisch ändern

Ich verwende die Mat-Grid-Liste: https://material.angular.io/components/grid-list/examples

Also in der Dokumentation ist es angegeben (Sie können den Link unten verweisen):

Hinzufügen von Kacheln, die sich über mehrere Zeilen oder Spalten erstrecken Mit den Eigenschaften rowspan und colspan können Sie den Zeilen- und Spaltenabstand jeder Kachel mit Mattenraster einzeln festlegen. Wenn nicht gesetzt, sind beide auf 1 voreingestellt. Der Colspan darf die Anzahl der Cols in der Mat-Grid-Liste nicht überschreiten. Es gibt keine solche Einschränkung für den Zeilenbereich, es werden jedoch einfach mehr Zeilen hinzugefügt, damit die Kachel gefüllt wird.

Mein Problem ist jedoch, dass ich eine Struktur wie die folgende haben möchte:

es gibt drei Zeilen und in der ersten Zeile 3 Spalten, in der zweiten Zeile 4 Spalten und in der dritten Zeile 2 Spalten. Wie ein Collagenrahmen. Die Anzahl der Spalten pro Zeile wird dynamisch gesendet.

Gibt es eine Lösung oder einen alternativen Weg, um dies zu erreichen? Verweisen Sie auf dieses Bild: https://i.stack.imgur.com/AhsrY.png

3
ian dsouza

Ja, Sie können die dynamischen Spalten und Zeilen für jede Kachel ändern.

<mat-grid-list cols="{{desired_columns}}" rowHeight="{{desired_rowHeight}}">
    <mat-grid-tile
        *ngFor="let tile of tiles"
        [colspan]="tile.cols"
        [rowspan]="tile.rows"
        [style.background]="tile.color">
       {{tile.text}}
    </mat-grid-tile>
</mat-grid-list>

Dies ist eine Möglichkeit, indem Sie eine Liste verwenden, z. tiles, die Sie in Ihrer TypeScript-Klasse haben, und stellen Sie die Werte dynamisch ein.


Oder Sie können Ihr mat-grid-tiles-Handbuch in HTML erstellen, aber dennoch unterschiedliche Spalten- und Zeilenbereiche für jede tile festlegen.

<mat-grid-tile [colspan]=1 [rowspan]=2>
    content
</mat-grid-tile>
<mat-grid-tile [colspan]=4 [rowspan]=1>
    content
</mat-grid-tile>
<mat-grid-tile [colspan]=3 [rowspan]=2>
    content
</mat-grid-tile>
4
L. Guthardt

Sie können dies versuchen: Angular2-Tabelle mit dynamischen Zeilen und Spalten oder durch Verwendung mehrerer Mat-Grid-Listen, indem Sie verschiedene Zeilenhöhenverhältnisse und Spalten für verschiedene Zeilen bereitstellen:

<mat-grid-list cols="{{your_desired_columns}}" rowHeight="{{your_dynamic_ratio}]">
    <mat-grid-tile>1</mat-grid-tile>
    <mat-grid-tile>2</mat-grid-tile>
    <mat-grid-tile>3</mat-grid-tile>
   ..
    <mat-grid-tile>n</mat-grid-tile>
</mat-grid-list>
0
Prachi