[英]Angular component multiple instance binding input problem
I am using an Angular Wrapper for JSON Editor like this:我正在为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>
The problem is that eventParams
should be different for each editor but it is not varying.问题是每个编辑器的
eventParams
应该不同,但它并没有变化。
I think problem is this component code (but not sure) (This line is in the component taken from github):我认为问题是这个组件代码(但不确定)(这一行在从 github 获取的组件中):
@ViewChild('jsonEditorContainer', { static: true }) jsonEditorContainer: ElementRef;
The component is behaving like a singleton.该组件的行为就像一个单例。 Any help?
有什么帮助吗?
Edit: I edited this repo and added jsonchange event.编辑:我编辑了这个 repo 并添加了 jsonchange 事件。 Details here
详情在这里
You may want to use @ViewChildren
with a direct reference to the component instead of a template variable string, to get all the JSON editors references:您可能希望使用
@ViewChildren
直接引用组件而不是模板变量字符串,以获取所有 JSON 编辑器引用:
@ViewChildren(JsonEditorComponent) jsonEditorContainers: QueryList<ElementRef>;
// ...
jsonEditorContainers.find(...);
It returns a QueryList that allows you to iterate through all ElementRef
, and monitor the changes with an Observable changes
.它返回一个QueryList ,允许您遍历所有
ElementRef
,并使用 Observable changes
监视changes
。
What is eventParams
?什么是
eventParams
? What is jsonChange
?什么是
jsonChange
? I could be wrong, but data doesn't seem to be two way bindable either, according to the source code.我可能是错的,但根据源代码,数据似乎也不是双向可绑定的。
It seems like you might be looking for something like this:看起来你可能正在寻找这样的东西:
<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>
You can then read the test_step_id
in your changeStepActions
method.然后,您可以阅读
test_step_id
在changeStepActions
方法。 If this works, I don't know how you made it compile in the first place.. are you using a CUSTOM_ELEMENTS_SCHEMA
?如果这有效,我不知道你是如何编译它的。你在使用
CUSTOM_ELEMENTS_SCHEMA
吗?
Its not necessary to use @ViewChildren for that you have to rewrite the entire code of component, make sure while using @ViewChild you pass correct editor reference.没有必要使用@ViewChildren,因为您必须重写组件的整个代码,确保在使用@ViewChild 时传递正确的编辑器引用。
As following如下
@ViewChild('carEditor' ) carEditor: JsonEditorComponent;
@ViewChild('mobileEditor') mobileEditor: JsonEditorComponent;
Stackblitz example for refernce : Stackblitz 示例供参考:
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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.