My Django API is set up to provide a list of movies titles with their corresponding IDs.
I've implemented a movie service in TypeScript that retrieves the list of movie titles and IDs using the GET operation.
In my NativeScript project, I have two files: items.component.ts
import { Component, OnInit } from "@angular/core";
import { MovieService } from "../services/movie.service";
@Component({
selector: "ns-items",
moduleId: module.id,
templateUrl: "./items.component.html",
providers: [MovieService]
})
export class ItemsComponent implements OnInit {
items;
constructor(private movieService: MovieService) { }
ngOnInit(): void {
this.movieService.getMovies().subscribe(
movies => {
this.items = movies;
console.log(movies);
},
error => {
console.log('error', error);
}
);
}
}
and items.component.html
<ActionBar title="Movie Rater App" class="action-bar">
</ActionBar>
<StackLayout class="page">
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<Label [nsRouterLink]="['/item', item.id]" [text]="item.title"
class="list-group-item"></Label>
</ng-template>
</ListView>
</StackLayout>
I'm seeing a blank screen on the app in the emulator - only the action bar title is visible. No errors are shown in the logs.
I've confirmed that the API is working correctly as I can see the response in the console (from the output of `console.log(movies)`).
Any assistance would be greatly appreciated.
Django API response:
{
"count": 5,
"next": null,
"previous": null,
"results": [
{
"id": 1,
"title": "Rocky (1976)",
"description": "A small-time boxer gets a supremely rare chance to fight a heavy-weight champion in a bout in which he strives to go the distance for his self-respect.",
"moviePoster": "http://127.0.0.1:8000/pic_folder/rocky-1976-poster2451370.jpg",
"avg_rating": 5,
"no_of_ratings": 1,
"maxRatings": 5
},
{
"id": 16,
"title": "Rocky II",
"description": "Rocky II",
"moviePoster": "http://127.0.0.1:8000/pic_folder/rocky2.jpg",
"avg_rating": 5,
"no_of_ratings": 1,
"maxRatings": 5
}]
}