2017-12-01 2 views
1

나는 Angular4- JsonEditor을 사용하여 하나의 JSON 뷰어와 편집기를 만들었습니다. 응용 프로그램로드 시간이 로컬 json 파일을 읽고 볼 수 있도록 채 웁니다. 그리고 잘 작동합니다.각도 4 속성 바인딩 새로 고침

이제 하나의 입력 상자와 btn이 있습니다. 입력 상자에 webservice url을 입력하고 응답으로 json 데이터를 가져옵니다. 버튼을 클릭하면 예상대로 응답을 얻고 있지만 문제는 내 의견이 변경되지 않습니다.

데이터를 채우려면 jsonData를 설정했지만 여전히 변경 사항이 반영되지 않은 상태에서 구성 요소에 [data] = "payLoadData"를 사용했습니다.

+0

콘솔에 오류가 있습니까? –

+0

아무 것도 아님. [데이터]를 새로 고치지 않기 만하면됩니다. –

+0

이 문제는 [공개 문제] (https://github.com/manishit56/Angular4-JsonEditor/issues/6)처럼 보입니다. – Und3rTow

답변

2

당신이 그렇게 경사 느끼면 같아요

ngOnInit() { 
 
     this.editorOptions.modes = ['code', 'text', 'tree', 'view']; // set all allowed modes 
 
     this.payLoadData = this.jsondata[0]; // initial file read data 
 
    } 
 
    
 
    submitSequence(){ 
 
    this._responseService.getPayLoadFromUrl() 
 
     .subscribe(data=>{ 
 
      this.payLoadData = data; 
 
     }, 
 
     error=>{ 
 
      console.error(error); 
 
     }) 
 
    }
<div class="inputSection"> 
 
    <input type="text" placeholder="Enter sequence url"> 
 
    <button (click)="submitSequence()">Submit</button> 
 
    <button (click)="generateResponse()">Generate response.json</button> 
 
</div> 
 
<json-editor [options]="editorOptions" [data]="payLoadData"></json-editor>

, 당신은 onChanges을 포함하도록 package source을 편집 할 수 있습니다. 예를 들어 :

import { OnChanges, SimpleChanges } from '@angular/core'; 
... 
export class JsonEditorComponent implements OnInit, OnChanges { 
    ... 
    ngOnChanges(changes: SimpleChanges): void { 
    if(changes.data.firstChange) return; 
    this.destroy(); 
    this.editor = new editor(this.rootElement.nativeElement, this.options, changes.data.currentValue); 
    } 
    ... 
} 

이것은 이론적으로 할 때 payLoadData 변경 바인딩 속성을 업데이트해야합니다. (안타깝게도 지금 당장 테스트 할 방법이 없습니다.)