Javascript 未捕获错误：模板分析错误：4

我一直在尝试在Angular中制作一个简单的应用程序，我能够在Angular中工作。不幸的是，它给了我这个错误

无法绑定到“笑话”，因为它不是“应用程序根”的已知属性

我不知道该怎么处理

有什么问题

笑话.组件.ts

import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { Joke } from '../jokes'

@Component({
  selector: 'app-joke',
  templateUrl: './joke.component.html',
  styleUrls: ['./joke.component.css']
})
export class JokeComponent implements OnInit {

  constructor() {}

  @Input("joke") joke: Joke;
  @Output() jokeDeleted = new EventEmitter<Joke>();

  deleteItem() {
    this.jokeDeleted.emit(this.joke)
  }

  ngOnInit() {}
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { JokeFormComponent } from './joke-form/joke-form.component';
import { JokeListComponent } from './joke-list/joke-list.component';
import { JokeComponent } from './joke/joke.component';

@NgModule({
  declarations: [
    AppComponent,
    JokeFormComponent,
    JokeListComponent,
    JokeComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序组件

import { Component, OnInit } from '@angular/core';
import {Joke} from '../jokes';

@Component({
  selector: 'app-joke-list',
  templateUrl: './joke-list.component.html',
  styleUrls: ['./joke-list.component.css']
})
export class JokeListComponent implements OnInit{
  jokes: Joke[];

  constructor() {
    this.jokes = [
      new Joke("I am telling a joke.", "Haha, that's funny!"),
      new Joke("I am telling an even funnier joke.", "Hahahahaha!!"),
      new Joke("I am telling the funniest joke.", "HAHAHAHAHAHA!!!!")
    ]
  }
  addJoke(joke) {
    this.jokes.unshift(joke);
  }
  deleteJoke(joke) {
    let indexToDelete = this.jokes.indexOf(joke)
    if (indexToDelete !== -1) {
      this.jokes.splice(indexToDelete, 1);
    }
  }

  ngOnInit() {}
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

应用程序模块.ts

import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { Joke } from '../jokes'

@Component({
  selector: 'app-joke',
  templateUrl: './joke.component.html',
  styleUrls: ['./joke.component.css']
})
export class JokeComponent implements OnInit {

  constructor() {}

  @Input("joke") joke: Joke;
  @Output() jokeDeleted = new EventEmitter<Joke>();

  deleteItem() {
    this.jokeDeleted.emit(this.joke)
  }

  ngOnInit() {}
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { JokeFormComponent } from './joke-form/joke-form.component';
import { JokeListComponent } from './joke-list/joke-list.component';
import { JokeComponent } from './joke/joke.component';

@NgModule({
  declarations: [
    AppComponent,
    JokeFormComponent,
    JokeListComponent,
    JokeComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

从您发布的代码中，我看到您的

AppComponent

类为空：

导出类AppComponent{}

由于您尚未发布html代码，我猜您正在做类似于plunker的事情，plunker中的

my app

相当于您问题代码中的

app root

：

<app-root *ngFor="let j of jokes" [joke]="j" (jokeDeleted)="deleteJoke($event)"></app-root>

---

您可以尝试删除angular在这个实现属性绑定@Input方法[Property]的child joke.component.ts类中为我们生成的OnInit方法。并重新启动服务器

plunker中的演示运行正常。请提及复制该问题的步骤

笑话

类在

*/crooks.ts

中的位置？你能检查它的路径吗？笑话.ts的路径位于应用程序文件夹中。我采取的步骤只是将每个组件包含在自己的文件夹中，并将HTML脚本包含在自己的component.HTML中。这就是我所做的一切。如果它在你的

app

文件夹中，我想你需要检查路径。类似于：

。/app/笑话

。我发布了app.module。谢谢！我能做到，但我只需要换成！你的评论给了我一个好主意！如果您的问题已解决，请将其标记为“已接受”，谢谢：）哦，对不起，完全忘记了！