Angular 4属性绑定刷新

Question

我已经使用Angular4- JsonEditor创建了一个JSON查看器和编辑器。 应用程序加载时会读取本地json文件并填充以供查看。 而且工作正常

现在我有一个输入框和btn。 我将在输入框中输入webservice网址，并获取json数据作为响应。 单击该按钮时，正在获得预期的响应，但问题是我的视图没有改变。

为了填充数据，一旦获得服务响应，就在组件中使用[data] =“ payLoadData”设置jsonData，但更改仍未在视图中反映出来。

  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

我想如果您愿意，可以编辑包源以包含onChanges 。 例如：

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更改时更新属性绑定。 （不幸的是，我现在无法对此进行测试。）