RadListView doesnt display in iOS simulator

plugins
ios

#1

I am trying out RadListView and am not able to get it display in iOS simulator. I have done the following:

  • Installed the plugin nativescript-ui-listview
  • imported the NativeScriptUIListViewModule into my module

My home.component.html looks like this:

<FlexboxLayout class="page">
    <StackLayout orientation="vertical">
        <Label class="header" text="{{ greeting }}"></Label>
        <TextView>
            <FormattedString>
                <Span text="This is a text view that uses attributed text. You can use text attributes such as "></Span>
                <Span text="bold, " fontWeight="Bold"></Span>
                <Span text="italic " fontStyle="Italic"></Span>
                <Span text="and "></Span>
                <Span text="underline." textDecoration="Underline"></Span>
            </FormattedString>
        </TextView>

        <RadListView [items]="portfolios">
            <ng-template tkListItemTemplate let-portfolio="item">
                <StackLayout>
                    <GridLayout rows="*" columns="*, *">
                        <Label col="1" horizontalAlignment="left" [text]="portfolio.name"></Label>
                        <Label col="2">
                            <FormattedString>
                                <Span [text]="portfolio.netValue"></Span>
                            </FormattedString>
                        </Label>
                    </GridLayout>
                </StackLayout>
            </ng-template>
        </RadListView>

    </StackLayout>
</FlexboxLayout>

THis is how my home.component.ts looks like

import { Component, OnInit } from '@angular/core';
import { Page } from 'tns-core-modules/ui/page';
import { ObservableArray } from 'data/observable-array';
import { ListViewEventData } from 'nativescript-ui-listview';
import { SessionService } from '~/shared/session.service';
import { PortfolioService } from '~/shared/portfolio.service';
import { Portfolio } from '~/shared/portfolio.model';
import { User } from '~/shared/user.model';

@Component({
  selector: 'Home',
  moduleId: module.id,
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  private loggedInUser: User;
  private greeting: string;
  private _portfolios: ObservableArray<Portfolio>;

  constructor(
    private page: Page,
    private sessionService: SessionService,
    private portfolioService: PortfolioService
  ) {
    // Use the component constructor to inject providers.
    this.page.actionBarHidden = true;
    this.loggedInUser = sessionService.getLoggedInUser();
    this.greeting = 'Welcome ' + this.loggedInUser.email;
  }

  get portfolios(): ObservableArray<Portfolio> {
    console.log(`home.component getPortfolios ${this._portfolios}`);
    return this._portfolios;
  }

  ngOnInit(): void {
    // Init your component properties here.
    this._portfolios = new ObservableArray(
      this.portfolioService.getPortfolios()
    );

    console.log('home.component ngInit() ' + this._portfolios);
  }

  onPortfolioEntryTap(args: ListViewEventData): void {}
}

I dont see any errors in the CONSOLE as well. Any ideas as to what I am missing here?


#2

As you have placed RadListView inside StackLayout, you must define height explicitly.


#3

Thanks !! That did the trick.