Angular проблема ввода с привязкой нескольких экземпляров компонента - PullRequest
Новая
       28

Angular проблема ввода с привязкой нескольких экземпляров компонента

0 голосов
/ 03 февраля 2020

Я использую Angular Wrapper для JSON Редактор , например: 

<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;

Компонент ведет себя как одиночка. Любая помощь?

Редактировать: я редактировал этот репозиторий и добавил событие jsonchange. Подробности здесь

Ответы [ 2 ]

1 голос
/ 03 февраля 2020

Что такое 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?

1 голос
/ 03 февраля 2020

Вы можете использовать @ViewChildren с прямой ссылкой на компонент вместо строки переменной шаблона, чтобы получить все JSON ссылки редакторов: 

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

// ...

jsonEditorContainers.find(...);

Возвращает QueryList , который позволяет перебирать все ElementRef и отслеживать изменения с помощью Observable changes.

...