1

Radlistview not rendering the source array. Please help me figure out where I'm going wrong.This is giving me null pointer exception. I have included the code in the section below.

srtdetails.component.html

<GridLayout tkExampleTitle tkToggleNavButton>
    <RadListView [items]="source">
        <template tkListItemTemplate let-item="item">
            <ScrollView>
                <StackLayout orientation="vertical">

                <GridLayout class="srtgrid border" rows="auto" columns=" *, *, *">

                <Label class="srtlabel " row="0" col="0" textWrap="true" [text]="item.requestid" ></Label>

                <Label class="srtlabel  " row="1" col="1" textWrap="true" [text]="item.requestedon" ></Label>

                <Label class="srtlabel " row="2" col="2" textWrap="true" [text]="item.requesttype" ></Label>

               </GridLayout>
            </StackLayout>              
          </ScrollView>               
        </template>
    </RadListView>
</GridLayout> 

strdetails.component.ts

import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
...

@Component({
  selector: "vp-srt-list",
  moduleId: module.id,
  templateUrl: './srtdetails.component.html',
  styleUrls: ["./srtdetails.component.css"],
  providers: [LoginService,NativeScriptUIListViewModule]
})

export class SrtListComponent implements OnInit{

public source: Array<any>;

constructor( private router: Router,
   private LoginService: LoginService,
   private routerExtensions: RouterExtensions){}
  ngOnInit(){
  this.source = this.LoadSrt();

}

 LoadSrt(): Array<any>{
    if (getConnectionType() === connectionType.none) {
        alert("Oops!! looks like your device is not connected to the internet ");
        return;
      }     
        this.LoginService.getAssociatedRequest()
            .subscribe((response: Array<any>) => {
          //let data = JSON.stringify(response)
          this.source = response; 
          console.log ("Response: " +this.source);
          return this.source;

        },          
        (error) => { console.log("Error happened", error.message)},
        () => { console.log("srt is completed")
        return this.source;
       }
    );         
  }

}

login.service.ts

  getAssociatedRequest(){
let headers = new Headers();
    return this.http.get(
     BackendService.requestUrl
  )
    .map((response) => { 

            return response.json(); 
              //  console.log("JSON BODY: ",JSON.stringify(body));
              }
                )

    .catch(this.handleErrors);
  }
2
  • Try giving initial value of empty array to your source property (either in your component's constructor or at the time when you are initializing the property itself)
    – Nick Iliev
    Commented Apr 13, 2017 at 14:21
  • @NickIliev Tried that. Still getting the same error
    – Valkyrie
    Commented Apr 13, 2017 at 14:25

1 Answer 1

2

Swap <RadListView [items]="source"> to <RadListView [items]="source" *ngIf="source">. That way, it wont render until it has data and will populate as soon as source has data

2
  • I took a while to realize this when i first tried this Commented Apr 13, 2017 at 14:33
  • 1
    if you accept this as the answer, other people can find this answer Commented Apr 13, 2017 at 14:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.