尝试动态更新生成的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>

我知道我对数据属性使用了双向绑定，但这是从示例中提取的，我希望它能按原样工作。

当我在位于组件的.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无关。我用一个span尝试了同样的方法，它在我的对象中显示字符串属性的插值，更改next()方法中的值也不起作用。

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

Answer 2

添加到已接受的答案中。我有一个类似的目标和类似的问题，我已经尝试了多种方式，但我使用(模型)而不是(数据)来绑定我的表单值，我注意到你在这里使用(数据)，所以我决定尝试一下，它不起作用，但我随后尝试了单向绑定数据，这就像一个护身符！