将嵌入对象传递给Angular2中的嵌套组件

时间:2017-05-08 17:37:35

标签: angular

我想将嵌入对象传递给角度为2的嵌套组件。

这是我的模特MyClassA:

import {MyClassB} from "../myclassb/myclassb.model";

export class MyClassA {

attributeA: string;
embeddedObject : MyClassB;
myId : string;

constructor(attributeA: string, embeddedObject: MyClassB, myId?: string) {
    this.attributeA = attributeA;
    this.embeddedObject = embeddedObject;
    this.myId = myId;
}
}

我的模型ClassB很简单:很多字符串属性;

这里是我的MyClassA列表组件,它列出了所有MyClassA对象(从服务器获取它,使用服务):

import { Component, OnInit } from "@angular/core";
import {MyClassA} from "./myclassa.model";
import {MyClassAService} from "./myclassa.service";

@Component({
    selector: 'app-myclassa-list',
    template: `
        <div class="col-md-8 col-md-offset-2">
            <app-myclassa
                   [myClassA]="myClassA"
                    *ngFor="let myClassA of myClassAs"></app-myclassa>
        </div>
    `
})
export class MyClassAListComponent implements OnInit {
    myClassAs: MyClassA[];
    constructor(private myClassAService: MyClassAService) {}
    ngOnInit() {
        this.myClassAService.getAllMyClassA()
            .subscribe(
                (myClassAs: MyClassA[]) => {
                    this.myClassAs = myClassAs;
                }
            );
    }
}

这里是我的MyClassA组件,很简单:

@Component({
    selector: 'app-myclassa',
    templateUrl: './myclassa.component.html'
})
export class MyClassAComponent {
    @Input() myClassA: MyClassA;

    constructor(private myClassAService: MyClassAService) {}
}

这里是显示组件的html模板:

<article class="panel panel-default">
    <div class="panel-body">
        {{ myClassA.attributeA }} :
        {{ myClassA.embeddedObject.attributeX }}
    </div>
</article>

myClassA.attributeA已正确显示,但embeddedObject为空。 我在调试器中看到myClassAService返回正确的对象MyClassA,其中填充了嵌入对象。

有人知道发生了什么吗?

0 个答案:

没有答案