Nativescript Angular Dynamic Grid Layout von Array

Question

Ureinwohner Neuling hier! Ich habe versucht, Elemente in einem Array von Objekten in einem Rasterformat (wie folgt:) ohne Erfolg anzuzeigen. Ich bin in der Lage zu durchlaufen und die Elemente mit dem folgenden Code in einer normalen Listenansicht angezeigt werden:

<GridLayout> 
    <ListView [items]="itemList" class="small-spacing"> 
     <ng-template let-item="item"> 
      <Label [text]="item.name" class="medium-spacing"></Label> 
     </ng-template> 
    </ListView> 
</GridLayout> 

Hier ist meine Array-Struktur:

[{"id":1, "name":"item1"},{"id":2, "name":"item2"},{"id":3, "name":"item3"},{"id":4, "name":"item4"},...] 

Ich würde gerne dynamisch können/programmatisch erzeugen und bevöl Zellen in einem Raster mit Daten aus dem Probenarray oben in Spalt von 2 oder 3 (max), wie nachstehend:

+-------------+-------------+-------------+ 
|    |    |    | 
|    |    |    | 
|    |    |    | 
+-------------+-------------+-------------+ 
|    |    |    | 
|    |    |    | 
|    |    |    | 
+-------------+-------------+-------------+ 
|    |    |    | 
|    |    |    | 
|    |    |    | 
+-------------+-------------+-------------+ 

ich versucht haben, das nur sehr wenige von diesem Szenario erwähnt fand ich online, aber keine Freude - bitte helfen!

Answer 1

Eine einfache Möglichkeit, dies für eine Liste von Elementen zu erreichen, ist die Verwendung RadListView with StaggeredLayout. Das RadListView kann kostenlos mit nativescript-telerik-ui (Nicht-Pro-Version) verwendet werden und kann so eingestellt werden, dass seine Elemente in gestaffelten Zellen angeordnet werden, wie im obigen Link gezeigt.

<ListViewStaggeredLayout tkListViewLayout spanCount="3"></ListViewStaggeredLayout> 

Full-Demo zeigt, wie RadListView mit versetztem Layout verwenden kann gefunden werden here