html - 无法读取未定义问题的属性“生成器”

Question

这是我的代码...

custom_formio.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { FormioAuthService } from 'angular-formio/auth';
import { Formio } from 'formiojs';
import {  SelectComponent } from './Select';

@Component({
  selector: 'app-custom_formio',
  templateUrl: './custom_formio.component.html',
  styleUrls: ['./custom_formio.component.less']
})

export class CustomFormioComponent  {
  builder: any;
  title = 'app';
  offlineCount = 0;
  offlineMode: any = null;
  offlineError = '';
  constructor(private auth: FormioAuthService, private router: Router) {
    this.auth.onLogin.subscribe(() => {
      this.router.navigate(['/home']);
    });

    this.auth.onLogout.subscribe(() => {
      this.router.navigate(['/auth/login']);
    });

    this.auth.onRegister.subscribe(() => {
      this.router.navigate(['/home']); 
    });
    Formio.registerComponent('custom_formio', SelectComponent);
  }

}

在 SelectComponent 上是我在 Select.js 中创建的自定义 formio 组件，可在https://formio.github.io/formio.js/docs/file/src/components/select/Select.js.html#lineNumber36和为此，我添加了一些如下代码..

   // Use the table component edit form.
SelectComponent.editForm = TableComponent.editForm;

// Register the component to the Formio.Components registry.
Components.addComponent('custom_formio', SelectComponent);
Formio.builder(document.getElementById('builder'), {}, {
  builder: {
    basic: false,
    advanced: false,
    data: false,
    layout: false,
    customBasic: {
      title: 'Basic Components',
      default: true,
      weight: 0,
      components: {
        select: true
      }
    }
  }
}).then(function(builder) {
  Formio.createForm(document.getElementById('formio'), {}).then(function(instance) {
    var json = document.getElementById('json');
    instance.on('change', function() {
      json.innerHTML = '';
      json.appendChild(document.createTextNode(JSON.stringify(instance.submission, null, 4)));
    });
    builder.on('change', function(schema) {
      if (schema.components) {
        instance.form = schema;
      }
    });
  });
});

现在我想将此作为 id 渲染为 html，为此我是在上面的代码中创建的，例如 Formio.builder(document.getElementById('builder'), {},{} in html 我将此 id 称为 .. .

                 <div id="builder"></div> 

但我无法读取'builder' undefined的属性..任何人都可以建议如何解决这个问题....

标签： htmlangulartypescript