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页面上打印/显示内容。

更改您的＆＃39; play.html＆＃39;

这是属性绑定的方式：

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

@Input（）返回[object Object] Typescript Angular2

2 个答案: