更改 json 数据绑定后刷新视图 Angular 2+

Question

所以，情况如下（我将简化代码，使其更具可读性，但同样的情况，我正在使用 json-server 来挂载一个带有 Json 文件):

我在 url 中有一个 json 文件（比如“http://localhost:3000”），其信息如下：

{
  "Object1":{
    "a":"Lorem ipsum",
    "b":"Dolor sit"},

  "Object2":{
    "a":"Amet Consectetur",
    "b":"Adipiscing elit"}
}

和获取此数据的服务，使用更改 json 的对象以从

获取数据的方法

getData.service.ts:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';


@Injectable()
export class GetDataService {

  constructor(private http:Http) { }

  private jsonURL: string = "http://localhost:3000/Object1"

  getData() {

      return (this.http.get(this.jsonURL).map((response:Response)=>response.json()))
  }

}

  changeData(param) {
      if (param = 'Obj1'){
      this.jsonURL = "http://localhost:3000/Object1"
      }this.jsonURL = "http://localhost:3000/Object2"        
  }

}

还有一个带有调用服务函数的函数的组件，比如这个

component1.component.ts:

import { Component, OnInit } from '@angular/core';
import { GetDataService } from './services/getData.service';

@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
})
export class Component1Component implements OnInit {

  data = [] 

  constructor(private getDataService: GetDataService,
              ) { }

  changeData(param) {

  this.getDataService.changeData(param)
  }

 ngOnInit() {

    const  GetDataService  = this.getDataService.getData().subscribe(data => this.data= data);

  }

和一个html模板绑定了"Objetc1"的属性"a"，还有两个调用getDataService函数来改变对象的按钮json 我从哪里绑定数据：

component1.component.hml:

<p>{{data.a}}</p>
<button (click)="changeData('Obj1')">This button changes the url to Object1</button>
<button (click)="changeData('Obj2')">This button changes the url to Object2</button>

情况是 url 实际上发生了变化（我对服务的 jsonURL 变量进行了 console.log() 并且它确实发生了变化，但是在该更改之后视图没有刷新并且 {{data.a}} 指向 Object1 的 "a" 属性而不是 Object2 的属性 "a"，即使当 url 指向 Object2.

有没有办法在进行更改后刷新视图？

Answer 1

getData.service.ts:

...
getData() {
    return this.http.get(this.jsonURL).map(response => response.json());
}

changeData(param) {
    if (param = 'Obj1') this.jsonURL = "http://localhost:3000/Object1";
    else this.jsonURL = "http://localhost:3000/Object2";

    return this.getData();
}
...

component1.component.ts:

...
data = [] 

constructor(private getDataService: GetDataService) { }

changeData(param) {
    this.getDataService.changeData(param).subscribe(res => this.data = data);
}

ngOnInit() {
    this.getDataService.getData().subscribe(data => this.data = data);
}
...

更改 json 数据绑定后刷新视图 Angular 2+

refresh view after changing json data binded Angular 2+

json

page-refresh

angular