时间戳

首页 > 解决方案 > 错误 TS2564：属性 'selectedMovie' 没有初始化程序，并且未在构造函数中明确分配

html - 错误 TS2564：属性 'selectedMovie' 没有初始化程序，并且未在构造函数中明确分配

问题描述

我想制作一个列表，我正在尝试将列表中的选定行打印到顶部块。但是我在创建对象时遇到了问题。我尝试了先前提出的问题的答案，但没有奏效。我使用的打字稿版本是 4.4。

我想要的是：

我想用图片显示什么

发生了什么：

发生了什么

这是问题：错误 TS2564：属性 'selectedMovie' 没有初始化程序，并且没有在构造函数中明确分配。

电影.ts

export class Movie{
     id:number;
     name:String;

     constructor(id:number,name:String){
    this.id = id;
    this.name = name;
   }
}

电影数据源.ts

import { Movie } from "./movie";

export const Movies: Movie[] = [
    {id:1, name:"movie 1"},
    {id:2, name:"movie 2"},
    {id:3, name:"movie 3"}
]

电影.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;
    }
 }

电影.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>

标签： htmlangulartypescript

解决方案

将您的电影类转换为接口。

export interface Movie {
     id:number,
     name:String
}

推荐阅读