FormIO FormBuilder没有以角8显示

Question

我遵循https://github.com/formio/angular-formio/wiki/Form-Builder的指令，我没有看到任何表单生成器在我的页面上呈现，即使没有客户端错误。

下面是我所看到的:由于某种原因，表单构建器被呈现为0x0。

我的代码：

questionnaire-builder.component.ts

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'questionnaire-builder',
  templateUrl: './questionnaire-builder.component.html',
  styleUrls: ['./questionnaire-builder.component.css']
})
export class QuestionnaireBuilderComponent{
  @ViewChild('json', {static: true}) jsonElement?: ElementRef;
  public form: Object = {components: []};

  onChange(event) {
    this.jsonElement.nativeElement.innerHTML = '';
    this.jsonElement.nativeElement.appendChild(
        document.createTextNode(JSON.stringify(event.form, null, 4)));
  }
}

questionnaire-builder.component.html

<p>Is form-builder working?</p>

<form-builder [form]="{
  components: []
}"></form-builder>


<form-builder [form]="form" (change)="onChange($event)"></form-builder>
<div class="well jsonviewer">
  <pre id="json"><code class="language-json" #json></code></pre>
</div>

questionnaire.module.ts

...
import {FormioModule} from 'angular-formio';
import {MatFormioModule} from 'angular-material-formio';

import {QuestionnaireBuilderComponent} from './questionnaire-builder/questionnaire-builder.component';

@NgModule({
  declarations: [
    QuestionnaireBuilderComponent,
  ],
  exports: [],
  entryComponents: [
    QuestionnaireBuilderComponent,
  ],
  imports: [
...
    MatFormioModule,
    FormioModule,
  ],
})
export class QuestionnaireModule {
}

Answer 1

从html中删除另一个<form-builder>模板。

试试这个，看看是否有任何东西呈现。

​

<form-builder [form]="form" (change)="onChange($event)"></form-builder>
<div class="well jsonviewer">
  <pre id="json"><code class="language-json" #json></code></pre>
</div>

​

Answer 2

我不认为同时使用MatFormioModule和FormioModule是理想的，我必须同时使用两者之一才能呈现我的表单和表单生成器，试着一次使用一个，希望能有所帮助。