Open riderx opened 5 years ago
on my html
<div (keydown)="onKeyDown($event)"> <ngx-monaco-editor class="my-code-editor" [model]="dataModel" [(ngModel]="datastring" [options]="editorOptions" (onInit)="monacoInited($event)"> </div>
on my ts
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core'; import { NgxEditorModel } from 'ngx-monaco-editor'; @Component({ selector: 'ngx-editor', templateUrl: './editor.component.html', styleUrls: ['./editor.component.scss'], }) export class EditorComponent implements OnInit { dataString: string; dataModel: NgxEditorModel; editorOptions = { theme: 'vs-dark', language: 'json', }; @Input() file: string; @Input() fileModel: string; @Output() save = new EventEmitter<boolean>(); @Output() close = new EventEmitter<boolean>(); constructor( private toast: NbToastrService, ) { } ngOnInit() { this.dataString = JSON.stringify(this.file, null, 2); } monacoInited(editor) { if (!this.dataModel) { console.log('this.fileModel', this.fileModel); try { this.dataModel = { value: JSON.stringify(this.file, null, 2), language: 'json', uri: monaco.Uri.parse(this.fileModel), }; console.log('this.dataModel', this.dataModel); } catch (err) { console.error(err); } } } closeEditor() { this.close.emit(); } checkJson() { try { // tslint:disable-next-line: no-console console.log('this.dataString', this.dataString); console.log('this.dataModel.value', this.dataModel); const newJson = JSON.parse(this.dataString); this.save.emit(newJson); } catch (err) { this.toast.show('Danger', 'JSON wrong format'); } } onKeyDown($event): void { // Detect platform if (navigator.platform.match('Mac')) { this.handleMacKeyEvents($event); } else { this.handleWindowsKeyEvents($event); } } handleMacKeyEvents($event) { // MetaKey documentation // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey const charCode = String.fromCharCode($event.which).toLowerCase(); if ($event.metaKey && charCode === 's') { // Action on Cmd + S this.checkJson(); $event.preventDefault(); } } handleWindowsKeyEvents($event) { const charCode = String.fromCharCode($event.which).toLowerCase(); if ($event.ctrlKey && charCode === 's') { // Action on Ctrl + S this.checkJson(); $event.preventDefault(); } } }
when i do a ctrl + s both ngModel and datamodel don't reflect change done in file
Quite the same issue: if I bind with NgxEditorModel I miss the changes in the code, but if I bind with both I have errors in console.
on my html
on my ts
when i do a ctrl + s both ngModel and datamodel don't reflect change done in file