Error to iterate a list under list


#1

Hi.

I’m trying to iterate over a list under another list, like this:

    <ListView [items]="tripPlannerList" row="2" col="0" class="listViewContainer" automationText="Resultados">
    
      <template let-item="item">
        <GridLayout rows="auto, auto" columns="*">
          <GridLayout row="0" col="0" rows="*" columns="auto, auto, auto, *" orientation="horizontal" class="listItem" backgroundColor="#e1e2e3">
            <Label row="0" col="0" [text]="item.departureTime" class="boldText" style="margin-left: 20; width: 40;"></Label>
            <Label row="0" col="1" text=" - " class="boldText"></Label>
            <Label row="0" col="2" [text]="item.arrivalTime" class="boldText" style="width: 40; text-align: right;"></Label>
            <Label row="0" col="3" [text]="item.travelTime" class="boldText" style="margin-right: 20; text-align: right;"></Label>
          </GridLayout>
          
          <StackLayout row="1" col="0" orientation="vertical" class="listItemTextContainer">
            <Label [text]="item.route" class="listItemTextTitle boldText" textWrap="true"></Label>
            <ListView [items]="item.steps" row="2" col="0">
              <template let-item="step">
                <Label [text]="step.description" class="listItemTextTitle boldText" textWrap="true"></Label>
              </template>
            </ListView>
          </StackLayout>
        </GridLayout>
      </template>

    </ListView>

But I’m getting an error when I try to access item.steps

<ListView [items]="item.steps" row="2" col="0">
          <template let-item="step">
            <Label [text]="step.description" class="listItemTextTitle boldText" textWrap="true"></Label>
          </template>
        </ListView>

If I use <Label [text]="item.steps"></Label> it prints the objects, so I concluded the object is fine, but I have this issue to iterate over this inner list.

Any suggestion?

Thanks


#2

The inner template re-assigns the property item because of let-item=.., so try replacing the inner one with let-step=step.


#3

Thanks @Eddy but I edited to this

            <ListView [items]="item.steps" row="2" col="0">
              <template let-step="step">
                <Label [text]="step.description" class="listItemTextTitle boldText" textWrap="true"></Label>
              </template>
            </ListView>

and I got the same error.

Was that what you mean?


#4

Changing that let-step="step" to let-step="item" should work. I think I made a mistake in my previous comment.


#5

I think your problem is that you are using item as your contextual variable, and item is what angular uses to refer to the item in the array. Try this:

<ListView [items]="tripPlannerList" row="2" col="0" class="listViewContainer" automationText="Resultados">
    
      <template let-trip="item">
        <GridLayout rows="auto, auto" columns="*">
          <GridLayout row="0" col="0" rows="*" columns="auto, auto, auto, *" orientation="horizontal" class="listItem" backgroundColor="#e1e2e3">
            <Label row="0" col="0" [text]="trip.departureTime" class="boldText" style="margin-left: 20; width: 40;"></Label>
            <Label row="0" col="1" text=" - " class="boldText"></Label>
            <Label row="0" col="2" [text]="trip.arrivalTime" class="boldText" style="width: 40; text-align: right;"></Label>
            <Label row="0" col="3" [text]="trip.travelTime" class="boldText" style="margin-right: 20; text-align: right;"></Label>
          </GridLayout>
          
          <StackLayout row="1" col="0" orientation="vertical" class="listItemTextContainer">
            <Label [text]="trip.route" class="listItemTextTitle boldText" textWrap="true"></Label>
            <ListView [items]="trip.steps" row="2" col="0">
              <template let-step="item">
                <Label [text]="step.description" class="listItemTextTitle boldText" textWrap="true"></Label>
              </template>
            </ListView>
          </StackLayout>
        </GridLayout>
      </template>

    </ListView>

#6

Guys,

I solved this problem using *ngFor, my final code is:

    <ListView [items]="tripPlannerList" row="2" col="0" class="listViewContainer" automationText="Resultados">
    
      <template let-item="item" let-i="i">
        <GridLayout rows="auto, *" columns="*">
          <GridLayout row="0" col="0" rows="*" columns="auto, auto, auto, *" orientation="horizontal" class="listItem" backgroundColor="#e1e2e3">
            <Label row="0" col="0" [text]="item.departureTime" class="boldText" style="margin-left: 20; width: 40;"></Label>
            <Label row="0" col="1" text=" - " class="boldText"></Label>
            <Label row="0" col="2" [text]="item.arrivalTime" class="boldText" style="width: 40; text-align: right;"></Label>
            <Label row="0" col="3" [text]="item.travelTime" class="boldText" style="margin-right: 20; text-align: right;"></Label>
          </GridLayout>
          
          <StackLayout row="1" col="0" orientation="horizontal" class="listItemTextContainer">
              
              <StackLayout *ngFor="let step of item.steps; let lastItem = last" orientation="horizontal" backgroundColor="red">
                <Image src="res://tp_walk" stretch="none" [visibility]="step.action == 1 ? 'visible' : 'collapsed'"
                backgroundColor="blue"></Image>

                <GridLayout rows="auto, auto" columns="auto" [visibility]="step.action != 1 ? 'visible' : 'collapsed'"
                backgroundColor="green">
                  <Label row="0" col="0" [text]="step.route"></Label>
                  <Image row="1" col="0" src="res://tp_bus" stretch="none"></Image>
                </GridLayout>

                <Image src="res://tp_step_separator" stretch="none" [visibility]="lastItem ? 'collapsed' : 'visible' "
                backgroundColor="yellow"></Image>

              </StackLayout>

              <Image src="res://arrow" stretch="none" class="middleAlignment"
              backgroundColor="gray"></Image>
              

          </StackLayout>

        </GridLayout>
      </template>

    </ListView>

Cheers,