javascript - Angular 2/4 : Assign array value from promise function in service layer to a variable in component

Question

我正在使用 Promise 调用服务层中的 post 函数，它返回一个 JSONArray 。我能够在组件层中获取它，但无法分配给变量。

我试过的是:

config;


ngOnInit() {
    this.dataService.getTemplateData(this.templateId).then(result => this.config = result)
          .catch(error => console.log(error));
  }

:: result is printing jsonArray properly

我在控制台中收到以下错误。

AppComponent.html:34 ERROR TypeError: Cannot read property 'forEach' of undefined
    at DynamicFormComponent.webpackJsonp.../../../../../src/app/dynamic-form/containers/dynamic-form/dynamic-form.component.ts.DynamicFormComponent.createGroup (dynamic-form.component.ts:24)
    at DynamicFormComponent.webpackJsonp.../../../../../src/app/dynamic-form/containers/dynamic-form/dynamic-form.component.ts.DynamicFormComponent.ngOnInit (dynamic-form.component.ts:19)
    at checkAndUpdateDirectiveInline (core.es5.js:10843)
    at checkAndUpdateNodeInline (core.es5.js:12341)
    at checkAndUpdateNode (core.es5.js:12284)
    at debugCheckAndUpdateNode (core.es5.js:13141)
    at debugCheckDirectivesFn (core.es5.js:13082)
    at Object.eval [as updateDirectives] (AppComponent.html:34)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)
    at checkAndUpdateView (core.es5.js:12251)

我期待的是:

config = [
    {
      "type": "input",
      "label": "Full name",
      "name": "name",
      "placeholder": "Enter your name"
    },
    {
      "type": "select",
      "label": "Favourite food",
      "name": "food",
      "options": ["Pizza", "Hot Dogs", "Knakworstje", "Coffee"],
      "placeholder": "Select an option"
    },
    {
      "label": "Submit",
      "name": "submit",
      "type": "button"
    },
  ];

以下是我的 .html 逻辑:-

  <div class="app">
            <dynamic-form [config]="config">
            </dynamic-form>
  </div>

我的服务层:

getTemplateData(data:any): promise {

let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http
        .post(this.templateDataUrl, data, options)
    .toPromise()
    .then(this.extractData)
    .catch(this.handleError);
}

 private extractData(res: Response) {
    let body = res.json();
    return body || {};
}

Answer 1

正确初始化配置变量，我能够将数据分配给参数

config: any[] = [];