@Input() возвращает [object Object] Typcript Angular2

Question

Хорошо, я не могу найти здесь ошибку. Я использовал этот код раньше, и он работал, но никогда не был таким же.

Когда я использую @Input и пытаюсь выполнить console.log, я просто получаю [object Object]. Даже когда я устанавливаю его по умолчанию или пытаюсь зарегистрировать имя, он говорит, что имя не определено. Вот 4 файла.

герой-card.component.ts:

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

@Component({ 
    selector: 'hero-card', 
    templateUrl: 'app/views/play/hero-card/hero-card.html' 
}) 
export class HeroCard { 
    @Input() hero = {name : 'loading'}; 
    printHero(){ 
     console.log(this.hero); 
    } 
} 

герой-card.html

<div class="hero-card" (click)="printHero()"> 
<h1>Hero</h1> 
<p>{{hero.name}}</p> 
</div> 

play.html

<button class="btn btn-default" [routerLink]="['/home']">Quit</button> 
<div *ngIf="loaded"> 
<hero-card hero="{{hero}}"></hero-card> 
</div> 

play.ts

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import { HeroCard } from './hero-card/hero-card.component'; 
import { Shaman } from "../../lib/heros/shaman/hero.shaman"; 

@Component({ 
    selector: 'play', 
    templateUrl: 'app/views/play/play.html', 
    directives: [ROUTER_DIRECTIVES, HeroCard], 
    styles: [] 
}) 
export class Play { 
    hero: any; 
    loaded: boolean; 

    load(){ 
     this.hero = new Shaman(); 
     console.log(this.hero); 
     this.loaded = true; 
    } 

    ngOnInit():void { 
     this.loaded = false; 
     this.load(); 
    } 
} 

Answer 1

hero="{{hero}}" передает строгий hero в категорию hero, что, вероятно, является тем, что приводит к [object Object].

Используйте вместо этого [hero]="hero", если hero не должен быть строкой.

Answer 2

{{}} Интерполяция используется, чтобы просто распечатать/показать что-то на странице HTML.

Изменить '' play.html

Это как переплетены свойство:

<hero-card [hero]="hero"></hero-card>