Angular 4 示例教程类型脚本错误

Posted 2023-02-23

【中文标题】Angular 4 示例教程类型脚本错误

【英文标题】：Angular 4 sample tutorial type script error

【发布时间】：2018-03-10 06:05:38

【问题描述】：

我正在尝试 Angular 网站中给出的教程。我遇到了一个障碍，我无法找出问题所在。

我使用 Angular cli 创建了项目。

app.component.ts

import  Component  from '@angular/core';
import Hero from './hero';



const HEROES: Hero[] = [
   id: 11, name: 'Mr. Nice' ,
   id: 12, name: 'Narco' ,
   id: 13, name: 'Bombasto' ,
   id: 14, name: 'Celeritas' ,
   id: 15, name: 'Magneta' ,
   id: 16, name: 'RubberMan' ,
   id: 17, name: 'Dynama' ,
   id: 18, name: 'Dr IQ' ,
   id: 19, name: 'Magma' ,
   id: 20, name: 'Tornado' 
];


@Component(
  selector: 'app-my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  title = 'app';
  selectedHero: Hero;
  heroes = HEROES;
  onSelect(hero: Hero): void 
  this.selectedHero = hero;
  

app.module.ts

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  FormsModule  from '@angular/forms';

import  AppComponent  from './app.component';
import HeroDetailComponent from './hero-detail.component';

@NgModule(
  declarations: [
    AppComponent,
    HeroDetailComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

hero-detail.component.ts

import Component, Input from '@angular/core';
import Hero from './hero';
@Component(
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html'
)
export class HeroDetailComponent 
@Input() hero: Hero;

英雄.ts

export class Hero 
id: number;
name: string;

源结构：

启动应用时出现以下 TS 错误

编译失败。

/Users/name/Documents/workspaces/angular-tutorial1/firstapp/src/app/hero-detail.component.ts (3,12): ' selector: number; 类型的参数；模板网址：字符串； ' 不可分配给“组件”类型的参数。种类 属性“选择器”不兼容。 类型“数字”不可分配给类型“字符串”。

【问题讨论】：

尝试重新编译ts文件，粘贴hero-detail.component的js文件

你能添加你的 hero-detail.component.html 文件吗？

这是一个奇怪的错误，给selector: 'app-hero-detail' 绝对不是一个数字。我的猜测是你的缓存不干净。关闭您的 IDE，删除 node_modules、npm cache clean 和 npm install 新鲜是您最好的选择，从这里没有更多信息。需要的其他信息是您拥有<app-hero-detail></app-hero-detail> 的 HTML 和 hero-detail html 本身

我重新启动了 ng 服务器，它工作了。好像是缓存问题。

【参考方案1】：

app-component.html 有一行喜欢吗？

<app-hero-detail [hero]="selectedHero"></app-hero-detail>