Question

我正在尝试从父组件加载子组件。从父组件我需要将一些参数传递给子组件，子组件将在子组件中用于进行服务调用并从WebAPI服务检索一些数据。返回的数据应绑定到子组件中的某些输入控件。

我验证了参数是传递给子组件的，它会进行服务调用并返回正确的数据。但返回的数据不与子组件中的输入控件绑定。

注意：进行WebAPI服务调用和检索数据是在子组件的公共方法中编写的，在分配/传递输入参数后，将从父组件调用此方法。

我的参数组件调用方法

this._cr.resolveComponent(ExtractorQueueDetails).then(cmpFactory => {
                if (this.cmpRef) {
                    this.cmpRef.destroy();
                    this.cmpRef = null;
                }
                console.log("Creating ExtractorQueueDetails component");

                this.cmpRef = this.childContainer.createComponent(cmpFactory);
                this.cmpRef.instance.ExtractorQueueID = this.extractorQueueID;
                this.cmpRef.instance.LoadExtractorQueueDetails();//public method in child component

            });

父组件html内容

<div>
    <k-grid [options]="options" (click)="onChange($event)"></k-grid>
</div>
<div>
    <extractorqueue-details [(ngModel)]="resultData"></extractorqueue-details>
</div>

我的孩子组件

import { Component, Input, AfterViewInit } from '@angular/core';
import { CacheDataService } from '../Service/CacheDataService';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import { FORM_DIRECTIVES } from '@angular/common';

@Component({
    selector: 'extractorqueue-details',
    templateUrl: './HTML/Admin/ExtractorQueueDetails.html',
    directives: [FORM_DIRECTIVES],
    providers: [CacheDataService, HTTP_PROVIDERS]
})
export class ExtractorQueueDetails {
    @Input() ExtractorQueueID : any; 
    resultData: any;

    constructor(private _CacheDataService: CacheDataService) {
        console.log("ExtractorQueueDetails component is loaded");
        console.log("ExtractorQueueID received : " + this.ExtractorQueueID);

        if (this.ExtractorQueueID != undefined) {
            this.LoadExtractorQueueDetails();
        }
    }

    GetExtractorQueuesByID(_extractorQueueID) {
        console.log("Inside GetExtractorQueuesByID method in ExtractorQueueDetails");

        this._CacheDataService.GetExtractorQueuesByID(_extractorQueueID)
            .subscribe(
            (res) => {
                this.resultData = res;
                console.log(this.resultData);
                //this.DrawBubbleChart();
            },
            (error) => console.log(error),
            () => console.log('Error in GetExtractorQueuesByID in ExtractorQueueDetails')
            );
    }

    public LoadExtractorQueueDetails()
    {
        console.log("in sample of ExtractorQueueDetails");
        console.log("ExtractorQueueID received in sample : " + this.ExtractorQueueID);

        this.GetExtractorQueuesByID(this.ExtractorQueueID);
    }
}

我的子组件html内容

 <div class="col-md-6">
                <div class="form-group col-lg-4">
                    <label>Queue ID</label>
                    <input type="text" name="txtQueueID" class="form-control" id="txtQueueID" [(ngModel)]="resultData.queueId">
                </div>
                <div class="form-group col-lg-4">
                    <label>Current Status</label>
                    <input type="text" name="" class="form-control" id="" value="">
                </div>
                <div class="form-group col-lg-4">
                    <label>Application</label>
                    <input type="text" name="" class="form-control" [(ngModel)]="resultData.Description" id="" value="">

                </div>

使用硬编码的json数据编辑Plunker

我创建了一个plunker，我尝试对json进行硬编码并将其绑定到文本框控件。但它不在这里工作

子组件中没有发生数据绑定

0 个答案: