嘗試動態更新生成的 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>

我知道我對 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);
}

我真的需要它來工作，因為我的真正目標是顯示一個表單並讓用戶使用下拉列表在此表單和第二個表單之間切換。 我希望每次更改架構、布局或數據時都會動態修改表單。

任何人都可以幫忙嗎？

謝謝！

Answer 1

事實證明，這與 angular6-json-schema-form 無關。 我用一個 span 嘗試了同樣的事情，它顯示了我的對象內的字符串屬性的插值，並且更改 next() 方法中的值也不起作用。

經過多次試驗，我發現我訂閱觀察者的方式（調用 subscribe 並傳遞“this”，同時確保我在類中的其他地方定義了 next() 和 error() 方法，從而滿足 PartialObserver 接口）使它這樣，即使 ngZone 告訴我在 next() 方法中執行的代碼發生在 Angular Zone 中，更改檢測也沒有發生。 通過在訂閱時內聯定義我的 next() 方法使我的問題消失了。

Answer 2

添加到已接受的答案中。 我有一個類似的目標和類似的問題，我嘗試了多種方法，但我使用 [(model)] 而不是 [(data)] 來綁定我的表單值，我在這里注意到您正在使用 [( data)] 所以我決定嘗試一下，它沒有用，但后來我嘗試了一種綁定方式，所以 [data] 就像一個魅力！