Angular 組件多實例綁定輸入問題

Question

我正在為JSON 編輯器使用Angular Wrapper ，如下所示：

<div *ngFor="let act of editedActions" class="w-100-p p-24">
  {{act.test_step_id}}
  <json-editor [options]="editorOptions" [(data)]="act.action_json" [(eventParams)]="act.test_step_id" (jsonChange)="changeStepActions($event)"></json-editor>
  <button mat-raised-button class="w-100-p mt-24" color="primary" (click)="editRecordJson(act.test_step_id)">
    <span>Update</span>
  </button>
</div>

問題是每個編輯器的eventParams應該不同，但它並沒有變化。

我認為問題是這個組件代碼（但不確定）（這一行在從 github 獲取的組件中）：

@ViewChild('jsonEditorContainer', { static: true }) jsonEditorContainer: ElementRef;

該組件的行為就像一個單例。 有什么幫助嗎？

編輯：我編輯了這個 repo 並添加了 jsonchange 事件。 詳情在這里

Answer 1

您可能希望使用@ViewChildren直接引用組件而不是模板變量字符串，以獲取所有 JSON 編輯器引用：

@ViewChildren(JsonEditorComponent) jsonEditorContainers: QueryList<ElementRef>;

// ...

jsonEditorContainers.find(...);

它返回一個QueryList ，允許您遍歷所有ElementRef ，並使用 Observable changes監視changes 。

Answer 2

什么是eventParams ？ 什么是jsonChange ？ 我可能是錯的，但根據源代碼，數據似乎也不是雙向可綁定的。

看起來你可能正在尋找這樣的東西：

<div *ngFor="let act of editedActions" class="w-100-p p-24">
  <json-editor [options]="editorOptions" 
               [data]="act.action_json"
               (change)="changeStepActions($event, act.test_step_id)">
  </json-editor>
</div>

然后，您可以閱讀test_step_id在changeStepActions方法。 如果這有效，我不知道你是如何編譯它的。你在使用CUSTOM_ELEMENTS_SCHEMA嗎？

Answer 3

沒有必要使用@ViewChildren，因為您必須重寫組件的整個代碼，確保在使用@ViewChild 時傳遞正確的編輯器引用。

如下

@ViewChild('carEditor' ) carEditor: JsonEditorComponent;
@ViewChild('mobileEditor') mobileEditor: JsonEditorComponent;

Stackblitz 示例供參考：

單擊此處查看代碼示例

Answer 4

To use multiple jsoneditors in your view you cannot use the same editor options.

You should have something like:

<div *ngFor="let prd of data.products" class="w-100-p p-24" >
  <json-editor [options]="makeOptions()" [data]="prd" (change)="showJson($event)"></json-editor>
</div>
makeOptions = () => {
  return new JsonEditorOptions();
}