Question

我有一个对我来说有点神秘的错误。也许一些新的眼睛可以发现我的错误！

我有detail-component和list-component，我从服务器检索数据。我的列表组件就像一个魅力，但我遇到了细节组件的问题。来自服务器的数据是正确的，但是当我尝试将其打印到浏览器时，它会给我一个未定义的错误（无法获取未定义的名称）。一切都在ngOnInit方法中运行良好，并按预期将我的数据记录到控制台。以下是详细信息组件中代码的相关部分：

export class HeroDetailComponent implements OnInit {

    @Input() hero: Hero; //also tried without the input in front of hero

    constructor(public _routeParams: RouteParams, public _service: Service) {

    }

    ngOnInit() {
        let id = this._routeParams.get('id');
        this._service.getById(id)

            .subscribe(hero => {
                this.hero = hero;
                console.log("hero: ", this.hero); //the correct data is logged!
            });     
    }
}

在模板中：

<h1>Hero: {{hero.name}}</h1>

作为参考列表组件中的相同相关代码，列出所有英雄并完美地工作。

export class HeroListComponent implements OnInit {
    name: string;
    id: string;
    date: string;
    heroes: Array<Hero>;

    constructor(public _service: Service, public _router: Router) {

    }

    ngOnInit() {
        this.getHeroes();
    }

    getHeroes() {
        this._service.getHeroes()
            .subscribe(heroes => this.heroes = heroes);
    }
}

模板：

<table>
    <tr *ngFor="let hero of heroes" >
    <td>{{hero.name}}</td>
    </tr>
</table>

我真的无法发现我的细节组件有什么问题???在此先感谢您的帮助！

Answer 1

在这些情况下，我会使用elvis（？）运算符：将{{hero.name}}更改为{{hero?.name}}，这样当英雄可用时，它会将结果打印到模板

Answer 2

你试过吗？

<h1 *ngIf="hero">Hero: {{hero.name}}</h1>

HTTP Observable订阅在组件中工作，但在模板中触发错误'undefined'（Angular2 + TS）

2 个答案: