CODEWITHSUNDEEP
listviewnativescriptng-template
Johnny
Johnny

Reputation: 105

NativeScript ListView dosnt work. i dont see the data

i have task-component.ts that contain some data in userTaskList array. now i want to display this data to the user.

i want to use <ListView> to display the data.

here is what i did :

task-component.ts :

 public userTaskList: any;
  constructor(private taskService: TaskService, private routerExtensions: RouterExtensions, private zone: NgZone) {
    this.userTaskList = [];
  }

  ngOnInit() {
    this.taskService.getAllTasks().toPromise().then(res => {
      this.userTaskList=res;
      this.zone.run(()=>{})
      console.log("data is here ! ==>>> ", this.userTaskList);
    })

  }

task-component.html:

<ActionBar title="Task List">
  <NavigationButton text="Go Back" icon="res://back" ></NavigationButton>
</ActionBar>
<ListView [userTaskList]="myTasks" >
    <ng-template let-task="task" >
  <StackLayout >
      <Label [text]= task.Name ></Label>
      <Button text="Add" class="submit-button" (tap)="submit()"></Button>
      <Button text="logOut" class="submit-button" (tap)="logOut()"></Button>
      <Button text="ShowToken" class="submit-button" (tap)="Tokenv()"></Button>
  </StackLayout>
</ng-template>
</ListView>

i don't get any Extantions and even the buttons are disappeard when i run it. all i see is blank page.

can you tell me what am i doing wrong? Thank you !

Upvotes: 1

Views: 54

Answers (1)

Royi Namir
Royi Namir

Reputation: 148624

Change 

<ListView [userTaskList]="myTasks" >

To 

<ListView [items]="userTaskList"  >

And change : 

<ng-template let-task="task" >

To

 <ng-template let-task="item" >

Also , you forgot " in : 

 <Label [text]= task.Name ></Label>

So it should be : 

<Label [text]= "task.Name" ></Label>

Listview requires [items] to be the property name.

BTW -you don't need ngZone here. (And a friendly advice , work with observables. not promises).

Upvotes: 3

Related Questions