Angular 4属性绑定刷新

Question

i have created one JSON viewer and editor using Angular4- JsonEditor . Application loading time its reading a local json file and populating to view. And its working fine

Now i have one input box and btn. i will enter webservice url in the input box and get the json data as a response. On click of the button am getting the response as expected but the problem is my view is not getting changed.

To populate the data i have used [data]="payLoadData" in component once i get the service response am setting the jsonData but still changes not reflecting in view.

  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> 

Answer 1

I guess if you feel inclined to do so, you could edit the package source to include onChanges . For example:

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);
  } 
  ...
}

This should, in theory, update the property binding when payLoadData changes. (unfortunately I have no way of testing this right now.)