I want to make a list and I'm trying to print the selected line from the list to the top block. But I am encountering a problem while creating an object. I tried the answers to the previously asked questions, but it did not work. The typescript version I'm using is 4.4.
What i want:
What happened:
This is problem: error TS2564: Property 'selectedMovie' has no initializer and is not definitely assigned in the constructor.
movie.ts
export class Movie{
id:number;
name:String;
constructor(id:number,name:String){
this.id = id;
this.name = name;
}
}
movie.datasource.ts
import { Movie } from "./movie";
export const Movies: Movie[] = [
{id:1, name:"movie 1"},
{id:2, name:"movie 2"},
{id:3, name:"movie 3"}
]
movies.component.ts
import { Component } from "@angular/core";
import { Movie } from "../movie";
import {Movies} from "../movie.datasource"
@Component({
selector: 'movies', // <movies> </movies>
templateUrl: 'movies.component.html',
styleUrls: ['./movies.component.css']
})
export class MoviesComponent{
title = "Movie List";
movies = Movies;
selectedMovie: Movie; //PROBLEM HERE
onSelect(movie:Movie): void{
this.selectedMovie = movie;
}
}
movies.component.html
<div class="card">
<div class="card-body">
<span class="badge badge-warning">
id: {{selectedMovie.id}} name: {{selectedMovie.name}}
</span>
</div>
</div>
<div class="card">
<div class="card-header">
{{title}}
</div>
<ul class="list-group list-group-flush">
<li *ngFor="let movie of movies" (click)="onSelect(movie)"
class="list-group-item"
[class.active] = "movie === selectedMovie">
<span class="badge badge-primary">{{movie.id}}</span>{{movie.name}}
<span class="close">x</span>
</li>
</ul>
</div>
