未知のエラー：テンプレート解析エラー：角度4

Question

私はAngularで簡単なアプリを作ろうとしていましたが、Plunkerで動作させることができました。残念ながら、それは私にこのエラーを与える

Can't bind to 'joke' since it isn't a known property of 'app-root'.

私は対処方法がわかりません。

何が問題ですか？

joke.component.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() {} 
} 

ジョーク-form.component.spec

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 

import { JokeFormComponent } from './joke-form.component'; 

describe('JokeFormComponent',() => { 
    let component: JokeFormComponent; 
    let fixture: ComponentFixture<JokeFormComponent>; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ JokeFormComponent ] 
    }) 
    .compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(JokeFormComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

    it('should be created',() => { 
    expect(component).toBeTruthy(); 
    }); 
}); 

ジョーク-list.component

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() {} 
} 

app.component

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

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

app.module.tsあなたが投稿したコードから

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 { } 

Answer 1

私はあなたのAppComponentクラスが空であることを参照してください。

export class AppComponent {}

あなたはhtmlコードを投稿していないので、私はguessiですあなたはAppComponentクラスに@Input("joke") joke: Jokeを追加すると、それはもうそのエラーをスローしてはいけません

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

：

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

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

をあなたはplunkerで my-appは、あなたの質問のコードで app-rootに相当しplunker、に似た何かをやっているngの