bug: ion-label breaks page when in sub ngFor iteration

[milesholt]

Type: bug

Ionic Version: 2.x

Platform: desktop browser

After looking at various examples and reading through the documentation, it appears, after a series of tests, as though this could be a bug.

Similar to the documentation, if I write this:

<ion-list>
   <ion-item *ngFor="#item of items">
           <ion-label>item.label</ion-label>
           <ion-input type="text" [(ngModel)]="item.value"></ion-input>
   </ion-item>
</ion-list>

This works fine, but if another nested iteration is required, such as:

<ion-list>
      <ion-item *ngFor="#item of items">

            Item {{ item.id }}

            <ion-list>
                  <ion-item *ngFor="#detail of item.details">
                        <ion-label>detail.label</ion-label>
                        <ion-input type="text" [(ngModel)]="detail.value"></ion-input>  
                  </ion-item>  
           </ion-list>

     </ion-item>
</ion-list>

then the list just appears as a series of blank list items, with no content. Inspecting the HTML confirms that there is no data present.

However, if I remove just the 'ion-label' element, then the list appears correctly.

So it seems as though the 'ion-label' element is causing the page to break, but only when placed within a nested iteration.

Thanks

[jgw96]

Thanks for submitting this issue and thanks for the code samples! Would you mind running ionic info and pasting the output here?

[jgw96]

Hello! Thanks for opening an issue with us! Since it has been a little while since there was any activity on this issue i will be closing it, but feel free to reopen this issue if needed!

[milesholt]

Hi, sorry for the late response!

Here is the info. I've updated to the latest version of Ionic 2 Beta but still seeing the issue -

Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.24
Ionic App Lib Version: 2.0.0-beta.14
ios-deploy version: 1.8.5
ios-sim version: 5.0.4
OS: Mac OS X El Capitan
Node Version: v0.12.2
Xcode version: Xcode 7.0.1 Build version 7A1001

[milesholt]

It appears I'm not allowed to reopen this issue, so could this be reopened by yourselves? Thanks

[adamdbradley]

Because you're placing ion-labels within an ion-list that's nested within an ion-item, the top most ion-item is correctly pulling out the ion-label for content projection on the top level ion-item. I would recommend no nesting an ion-list within another ion-item when using an ngFor like this. Sorry for not having a better answer, but I believe this would be expected behavior for Angular 2.

[EazyAndy]

Having a nested list within a list seems like a reasonably routine requirement. Whats the best way to achieve this? I have a list showing activities, and each of those has a varying number of steps. I need to show a lable and checkbox for each of those steps. How to show the label with this current projection bug?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.