0

我正在尝试使用 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>

我知道我正在为 data 属性使用 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);
}

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

任何人都可以帮忙吗？

谢谢！

4

2 回答 2

0

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

经过多次试验，我发现我订阅 Observer 的方式（调用 subscribe 并传递“this”，同时确保我在类的其他地方定义 next() 和 error() 方法，从而满足 PartialObserver 接口）成功了因此，即使 ngZone 告诉我在 next() 方法中执行的代码发生在 Angular Zone 中，更改检测也没有发生。通过在订阅时内联定义我的 next() 方法，我的问题消失了。

于 2019-09-13T13:15:06.533 回答
0

添加到接受的答案。我有类似的目标和类似的问题，我尝试了多种方法，但我使用 [(model)] 而不是 [(data)] 来绑定我的表单值，我在这里注意到您正在使用 [( data)] 所以我决定尝试一下，它没有用，但是我尝试了一种绑定方式，所以 [data] 并且它就像一个魅力！

于 2020-10-07T08:58:30.787 回答