как динамически отобразить nativescripts angular gridlayout с тремя столбцами подряд?

Question

Я новичок в нативных сценариях. Я пытаюсь динамически отображать разметку сетки с тремя столбцами подряд. Я использую плагин nativescript-ui-listview. данные, которые не отображаются, просто показывает пустую страницу, помогите мне в этом. вот мой xml код

<GridLayout rows="*">
    <RadListView [items]="items" class="items" marginTop="15"> 
     <ng-template tkListItemTemplate let-item="item">
     <FlexboxLayout
                (tap)="goToService(item.label)"
                flexDirection="column"
                class="dashboard-item"
                shadow="2" tkListItemTemplate
              >
                <image
                  src="{{item.icon}}"
                  width="30"
                  height="30"
                  marginTop="15"
                ></image>

                <Label
                  class="nameLabel"
                  text="{{item.label}}"
                  textWrap="true"
                ></Label>
              </FlexboxLayout>
            </ng-template> 
            <ListViewGridLayout
              tkListViewLayout
              scrollDirection="Vertical"
              ios:itemHeight="100"
              spanCount="3"
            >
            </ListViewGridLayout>
          </RadListView>
</GridLayout>

и данные моего ts-файла:

items = [
    { label: "Gift A Surprise", icon: fromResource("booksurprise_icon") },
    { label: "Payments", icon: fromResource("payments") },
    { label: "Healthcare", icon: fromResource("medical") },
    { label: "Home Services", icon: fromResource("homeservices_icon") },
    {label:"Outings", icon: fromResource("homeservices_icon")},
    {label:"ViewMore", icon: fromResource("homeservices_icon")}]