ListView with multidimensional array (Angular)


#1

Hi everyone,
I a have following data structure:

days = [{ "name": "Monday",
                "rooms":[{
                         "name": "Room A",
                         "session": [{
                                  "name":"Session A"
                          }]                      
                   }] 
               }]

with that I want to achieve a List View App with Angular with the room names as a header and the session names as list items as well as swiper for the selecting the day. Similar to this:

This is what I tried so far (Im seeing the day headers, not the sessions though):

<ListView height="100%" row="0" [items]="activeDay.rooms" itemTap="onItemTap" class="list-group">
    <ng-template nsTemplateKey="header" let-room="item">
        <Label [text]="room.name" class="list-group-item bg-primary" isUserInteractionEnabled="false" color="white" fontSize="24"></Label>
    </ng-template>
    <ng-template nsTemplateKey="cell" let-session="room.sessions">
        <StackLayout class="list-group-item">
            <Label [text]="session.name" class="list-group-item-heading"></Label>
        </StackLayout>
    </ng-template>
</ListView>


#2

Hmm, I don’t see your template selector, so not sure when it’s header or cell (perhaps that’s the cause of your issue). Assuming the selector works as expected, I think it should be something like this:

<ListView height="100%" row="0" [items]="activeDay.rooms" itemTap="onItemTap" class="list-group">
    <ng-template nsTemplateKey="header" let-room="item">
        <Label [text]="room.name" class="list-group-item bg-primary" isUserInteractionEnabled="false" color="white" fontSize="24"></Label>
    </ng-template>
    <ng-template nsTemplateKey="cell" let-room="item">
        <StackLayout class="list-group-item" *ngFor="let session of room.session">
            <Label [text]="session.name" class="list-group-item-heading"></Label>
        </StackLayout>
    </ng-template>
</ListView>

#3

Thanks for your reply! Unfortunately this is also not working. Im still not seeing the session names!


#4

You may want to create a Playground app with the code you have, I’d be happy to take a look.


#5

thank you sir

here’s the link to the playground


#6

Here you go, no need for multiple templates: https://play.nativescript.org/?template=play-ng&id=JaCySW&v=3

Although this is probably not what you want because 1 row now contains both the header and the session. So you need multiple templates and as said before an itemTemplateSelector (look it up). Then your data structure should be a bit different; it needs to hold an array of either a header, or a session, and the itemTemplateSelector should select the correct template based on that.


#7

So with the existing data structure it is not possible?

Is the RadListView Pro UI an alternative?


#8

The ListView is fine, and in this respect it’s the same with RadListView, I’m just saying that you need to add that itemTemplateSelector.