Binding issues inside ListView

[Jai-Krish]

I have a view with a list of items fetched from the variable items which is of type ObservableArray<Observable<item>>

<ActionBar title="My App" class="action-bar">
</ActionBar>
<StackLayout class="page">
    <!-- Not Working -->
    <ListView [items]="items" class="list-group">
      <ng-template let-item="item" let-i="index">
        <ng-container *ngIf="(item | async) as itm">
          <Label [nsRouterLink]="['/item', itm.id]" [text]="itm.name"
              class="list-group-item"></Label>
        </ng-container>
      </ng-template>
    </ListView>
    <!-- Working -->
    <Label [text]="'Items length: ' + items.length"></Label>
    <ng-container *ngIf="(items.getItem(0) | async) as itm">
      <Label [text]="'Name: '+itm.name"></Label>
    </ng-container>
</StackLayout>

Here, the ng-template gets generated but the contents inside the template doesn't showup. I can verify that the item Observable gets subscribed by adding a log before the Observer.next of that Observable.

What should I do to get this right?

Here is the minimal project: ListBinding.zip

[NickIliev]

@Jai-Krish you are using ObservableArray from NativeScript core modules along with RxObservable from rxjs. I would suggest using only one of the concepts preferably the Angular one (Rxjs) entirely in your implementation. You can also directly create the async pipe for your items source instead of using structural directive depending no the same asynchronous source. Example of async pipe with RxObservable source can be found here

[Jai-Krish]

@NickIliev As shown in the example, I've converted the items into Observable<Array<Observable<Item>>> and also changed the template into <ListView [items]="items$ | async" class="list-group"> but still it just shows the empty Labels without any text in it. Since I'm fetching these items from a real time database, I definitely need to listen to them individually for changes thats why every item is being served from an Observable.

[nmongiya]

  <ListView [items]="groceryList" row="0" class="small-spacing" [class.visible]="listLoaded" >
    <ng-template let-item="item">
      <StackLayout orientation="horizontal" (longPress)="itemSelect(item)" >
        <CheckBox  width="40" #CB1 [checked]="item.isSelected" class="medium-spacing" visibility="{{isCheckBoxVisible === 'visible' ?'visible' : 'collapsed'  }}"></CheckBox>
        <Image  width="40" class="medium-spacing"  visibility="{{isImageVisible === 'visible' ?'visible' : 'collapsed'  }}"></Image>
        <Label  width="40" [text]="item.custName" class="medium-spacing" ></Label>

      </StackLayout>
    </ng-template>
  </ListView>

  itemSelect(item:Order){
        this.isCheckBoxVisible = 'collapsed';
      this.isImageVisible = 'visible';
}

Checkbox and Image visibility is not binding for me as well.

[NickIliev]

@nmongiya are you still experiencing this issue? Let me know and log a new separate issue if you have project to reproduce this behavior with the latest tns-core-modules and nativescript-angular.