具有远程元数据的 Angular2 动态表单答案

【问题标题】：Angular2 dynamic form with remote metadata具有远程元数据的 Angular2 动态表单
【发布时间】：2017-06-01 22:16:50
【问题描述】：

我按照angular cookbook 中的说明创建了一个动态表单，然后我尝试使用数据库中的元数据创建表单。

我向获取字段类型、名称、ID 等发出了 HTTP 请求，但是当我尝试像 angular 示例中那样构建表单时，没有任何反应或控制台出现错误。

这是教程中的代码：

export class AppComponent { 
    questions: any[]; 
    constructor(service: QuestionService) { 
        this.questions =  service.getQuestions(); 
    } 
}

这就是我所做的：

export class AppComponent implements OnInit {
  campos: any[] = [];
  constructor(private servico: FormDadosService) {}
  ngOnInit() {
    this.servico.getCampos().subscribe(this.processaCampos);
  }
  processaCampos(dados) {
    for (let i = 0; i < dados.length; i++) {
      this.campos.push(new CampoBase({
        nome: dados[i].ZI2_NOME,
        label: dados[i].ZI2_DESC,
        ordem: dados[i].ZI2_ORDEM,
        obrigatorio: dados[i].ZI2_OBRIGAT,
        tamanho: dados[i].ZI2_TAM,
        valor: '',
        tipoCampo: dados[i].ZI2_TIPO
      }))
    }
  }
}

我收到此错误：

error_handler.js:50EXCEPTION: Cannot read property 'push' of undefined

我想我需要知道一种方法来在所有关于它的数据都从我的 HTTP 请求到达之后呈现表单。

【问题讨论】：

您遇到什么错误？能否包含代码的相关部分？
google 做了：export class AppComponent { questions: any[];构造函数（服务：QuestionService）{ this.questions = service.getQuestions(); } }
我做到了：export class AppComponent implements OnInit { campos:any[]=[];构造函数（私有服务：FormDadosService）{} ngOnInit() { this.servico.getCampos().subscribe(this.processaCampos); } processaCampos(dados) { for (let i = 0; i
我收到这个错误：error_handler.js:50EXCEPTION: Cannot read property 'push' of undefined

标签： forms angular dynamic metadata angular2-forms

【解决方案1】：

我是这样设计的：

export class AppComponent implements OnInit {

  campos: any[] = [];

  constructor(private servico: FormDadosService) { }

  ngOnInit() {
    this.servico.getCampos().subscribe((data) => {
      data.forEach(campo => {
        this.campos.push(new CampoBase({
          valor:     '',
          nome:      campo.ZI2_CAMPO,
          label:     campo.ZI2_DESC,
          tipoCampo: campo.ZI2_TIPO,
          tamanho:   campo.ZI2_TAM
        }))
      });
    });
  }
}

这个问题可以标记为已解决。

谢谢大家。

【讨论】：