尝试动态更新生成的 angular6-json-schema-form

Question

我正在尝试使用 angular6-json-schema-form 在我的 angular 8 应用程序中显示不同的表单。

我创建了一个 FormTemplate 模型，它包含一些关于需要显示的表单的属性，并使该对象成为可观察对象，并通过具有符号

的共享服务使其可用

@Injectable({
    providedIn: 'root'
})

在我的不同组件中，我正在观察这个对象，实际上每次我对该对象进行更改时，我都会通过 next() 方法接收通知。

在我的一个组件中，我使用 json-schema-form 选择器来显示表单，同时确保我使用属性绑定模式、布局和数据，就像这样:

<json-schema-form
loadExternalAssets="true"
[schema]="currentSchema"
[layout]="currentLayout"
[(data)]="currentData"
[debug]="true" 
language="fr"
framework="material-design"
(onChanges)="onJsonSchemaFormChange($event)"
(onSubmit)="onJsonSchemaFormSubmit($event)"
(isValid)="isValidJsonSchemaForm($event)"
(validationErrors)="jsonSchemaFormValidationErrors($event)"
(formSchema)="showJsonSchemaFormSchema($event)"
(formLayout)="showJsonSchemaFormLayout($event)"
>
</json-schema-form>

我知道我正在对数据使用 2 种方式绑定属性，但这是从示例中获取的，我希望它按原样工作。

当我在组件的 .ts 文件中的 next() 方法中更改 this.currentData 的值时，表单不会在屏幕上更新和刷新。

next(myFormTemplate: FormTemplate) {

    //This shows the values before the change, exactly as they appear on screen on the generated form
    console.log('BEFORE');
    console.log(this.currentData);

    this.currentData = {
        first_name: 'new',
        last_name: 'very new'
    };

    //This shows the updated values after the change, even though it's not updated on screen on the generated form
    console.log('AFTER');
    console.log(this.currentData);
}

我真的需要它来工作，因为我的真正目标是显示一个表单并让用户使用下拉菜单在这个表单和第二个表单之间切换。我希望每次更改架构、布局或数据时都能动态修改表单。

有人能帮忙吗？

谢谢！

Answer 1

事实证明，这与angular6-json-schema-form无关。我用一个跨度尝试了同样的事情，该跨度显示我的对象内的字符串属性的插值，并且在 next() 方法中更改值也不起作用。

经过多次试验，我发现我订阅 Observer 的方式（调用订阅并传递 "this"，同时确保我在 class 从而满足 PartialObserver 接口）使得即使 ngZone 告诉我在 next() 方法中执行的代码发生在 Angular 区域中，变化检测也没有发生。通过在订阅时内联定义我的 next() 方法，我的问题就消失了。

Answer 2

添加到已接受的答案中。我有一个类似的目标和一个类似的问题，我已经尝试了很多事情，但我使用 [(model)] 而不是 [(data)] 来绑定我的表单值，我在这里注意到你正在使用 [( data)] 所以我决定尝试一下，它没有用，但后来我尝试了一种绑定方式 [data] 并且效果很好！

尝试动态更新生成的 angular6-json-schema-form

Trying to update generated angular6-json-schema-form on the fly

angular

angular6-json-schema-form