javascript - Angular2 - pass ASYNC data to child component - Stack Overflow

admin管理员组

文章数量:1322692

I have issue, with passing async data to child ponent. I trying to write dynamic form generator. Issue starts when I try to call json via Observable and pass it into child ponent.

service:

generateSearchFields2(): Observable<any> {
        return this.http
            .get(this.API + 'searchFields')
            .map((res:Response) => {
                res.json().data as any;
                for (var i = 0; i < res.json().data.length; i++) {
                    var searchField = res.json().data[i];
                    switch (searchFieldponent) {
                        case "TextboxQuestion": 

                            let TXQ: TextboxQuestion = new TextboxQuestion({
                                key: searchField.key,
                                label: searchField.label,
                                value: searchField.value,
                                required: searchField.required,
                                order: searchField.order
                            });
                            this.searchFieldModels.push(TXQ);
                            console.log("TXQ: ", TXQ, this.searchFieldModels);
                            break;
                        case "DropdownQuestion": 

                            let DDQ: DropdownQuestion = new DropdownQuestion({
                                key: searchField.key,
                                label: searchField.label,
                                required: searchField.required,
                                options: searchField.options,
                                order: searchField.order
                            });
                            this.searchFieldModels.push(DDQ);
                            console.log("TXQ: ", DDQ, this.searchFieldModels);
                            break;
                        default:
                            alert("DEFAULT");
                            break;
                    }
                }
                return this.searchFieldModels.sort((a, b) => a.order - b.order);
            })
            .catch(this.handleError);
    }

Component Parent:

generateSearchFields2() {
    this.service.generateSearchFields2()
      .subscribe(res => this.searchFields = res)
  }

Iam passing variable via INPUT directive in parent template to child: [searchFields]="searchFields"

Issue is in child ponent, where searchField has undefined value. In this child I pass value to another service, to create formContros, but I got undefined there also. Data missing starts here, in child:

@Input() searchFields: SearchBase<any>[] = [];

ngOnInit() {   
    this.form = this.qcs.toFormGroup(this.searchFields);
    console.log("ONINIT DYNAMIC FORM COMPONENT: ", this.searchFields);

  }

Please for hint how I can pass async variable, to not loose data meantime

I have issue, with passing async data to child ponent. I trying to write dynamic form generator. Issue starts when I try to call json via Observable and pass it into child ponent.

service:

generateSearchFields2(): Observable<any> {
        return this.http
            .get(this.API + 'searchFields')
            .map((res:Response) => {
                res.json().data as any;
                for (var i = 0; i < res.json().data.length; i++) {
                    var searchField = res.json().data[i];
                    switch (searchField.ponent) {
                        case "TextboxQuestion": 

                            let TXQ: TextboxQuestion = new TextboxQuestion({
                                key: searchField.key,
                                label: searchField.label,
                                value: searchField.value,
                                required: searchField.required,
                                order: searchField.order
                            });
                            this.searchFieldModels.push(TXQ);
                            console.log("TXQ: ", TXQ, this.searchFieldModels);
                            break;
                        case "DropdownQuestion": 

                            let DDQ: DropdownQuestion = new DropdownQuestion({
                                key: searchField.key,
                                label: searchField.label,
                                required: searchField.required,
                                options: searchField.options,
                                order: searchField.order
                            });
                            this.searchFieldModels.push(DDQ);
                            console.log("TXQ: ", DDQ, this.searchFieldModels);
                            break;
                        default:
                            alert("DEFAULT");
                            break;
                    }
                }
                return this.searchFieldModels.sort((a, b) => a.order - b.order);
            })
            .catch(this.handleError);
    }

Component Parent:

generateSearchFields2() {
    this.service.generateSearchFields2()
      .subscribe(res => this.searchFields = res)
  }

Iam passing variable via INPUT directive in parent template to child: [searchFields]="searchFields"

Issue is in child ponent, where searchField has undefined value. In this child I pass value to another service, to create formContros, but I got undefined there also. Data missing starts here, in child:

@Input() searchFields: SearchBase<any>[] = [];

ngOnInit() {   
    this.form = this.qcs.toFormGroup(this.searchFields);
    console.log("ONINIT DYNAMIC FORM COMPONENT: ", this.searchFields);

  }

Please for hint how I can pass async variable, to not loose data meantime

• javascript
• angular
• typescript

Share Improve this question Follow asked Jan 17, 2017 at 8:27 Uland NimblehoofUland Nimblehoof 1,0312222 silver badges4141 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can make @Input() searchFields a setter

private _searchFields: SearchBase<any>[] = [];
@Input() set searchFields(value SearchBase<any>[]) {
  if(value != null) {
    this.form = this.qcs.toFormGroup(this.searchFields);
    console.log("ONINIT DYNAMIC FORM COMPONENT: ", this.searchFields);
  }
}

get searchFields() : SearchBase<any>[] {
  return this.searchFields;
}

You can also use ngOnChanges() which is called every time an input is updated, but a setter is usually more convenient except perhaps when the executed code depends on multiple inputs being set.

In the ngOnInit event the data which es from the parent is not bound yet. So your searchFields is undefined yet. You can use it in NgAfterViewInit ponent lifecycle event.

@Input() searchFields: SearchBase<any>[] = [];

ngAfterViewInit() {   
    this.form = this.qcs.toFormGroup(this.searchFields);
    console.log("ONINIT DYNAMIC FORM COMPONENT: ", this.searchFields);
}

For other cases you can see Angular2 Component Lifecycle events

本文标签： javascriptAngular2pass ASYNC data to child componentStack Overflow