如何将服务返回的数据作为子组件的输入传递？ Angular 2

Question

我正在尝试将从服务调用中获取的数据传递到子组件的输入，但它始终未定义或为空。我找到了原因，但不知道如何解决。在我看来，原因是当子组件被呈现时，（未初始化的）变量尚未由 HTTP 调用设置，因此它未初始化地传递。

我的父组件：

@Component({
    selector: 'live-auction',
    templateUrl: BaseConfigurations.baseTemplatePath + '/live/index.html',
    providers: [AuctionService]
})
export class LiveAuctionComponent {
    private auction: CarAuction = new CarAuction();

    public initialize() {
        this.getCarAuction();
    }

    getCarAuction(): void {
        this.auctionservice.getCarAuctions().subscribe(auction => {
                this.auction = auction;
            },
            error => this.onError(error));
    }
}

子组件：

@Component({
    selector: 'sellers-upcoming-auctions',
    templateUrl: BaseConfigurations.baseTemplatePath + '/auctions/upcoming/sellerAuctions.html',
    inputs: ['sellerid', 'take']
})

export class SellerUpcomingAuctionsComponent extends BaseConfigurations {
    private sellerid: string;
    private take: number;

    public initialize() {
        console.log(this.sellerid);
    }

    constructor() {
        super();
    }
}

在我的index.html（父组件模板）

<h3>Parent Template</h3>
<sellers-upcoming-auctions [sellerid]="auction.SellerUserId" take="4"></sellers-upcoming-auctions>

下面这一行：

[sellerid]="auction.SellerUserId"

应该以某种方式传递更新后的值（或等待对 return 响应的 http 调用）。像 promise 或 observable 之类的东西可能是一个解决方案，但我不知道如何？

谢谢

Answer 1

根据评论中的讨论，只需将 *ngIf 语句添加到您父级的子组件标记中，等待数据被检索，这样您就不会收到错误！

<sellers-upcoming-auctions *ngIf="auction" [sellerid]="auction.SellerUserId" take="4"></sellers-upcoming-auctions>

如何将服务返回的数据作为子组件的输入传递？ Angular 2

How to pass service returned data as an input of child component? Angular 2

angular

angular2-template

angular2-services