title: Reload view data after changes in angular2
body: <p>I have a component that displays a table of objects with a button in each row that calls a function to modify an attribute of the selected object. Even though the button works and does modify the attribute I have to manually reload the view to see the changes in the table.</p>
  
  <p>The functions looks like this:</p>
  
  <pre><code>accept(id: string) {
      this.service.accept(id).subscribe(
          data =&gt; {
              console.log('done');
          },
          error =&gt; {
              console.log('error'):
          });
  }
  </code></pre>
  
  <p>And the accept method on my service looks like this:</p>
  
  <pre><code>accept(id : string){
      return this.http.put('/myUrl/' +id).map(res =&gt; res.json());     
  }
  </code></pre>
  
  <p>I want the view to "reload" the moment I push the button displaying the new value correctly without having to reload the page manually. Is that possible and/or am I doing something wrong?</p>
  
  <p>EDIT 1</p>
  
  <p>Here is some more code of the html table with the button i was mentioning:</p>
  
  <pre><code>&lt;table class="table"&gt;
  &lt;thead class="thead-default"&gt;
          &lt;tr&gt;
              &lt;th&gt;Title&lt;/th&gt;
              &lt;th&gt;Date&lt;/th&gt;
              &lt;th&gt;Status&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr *ngFor="let item of items"&gt;
              &lt;td&gt;{{item.title}}&lt;/td&gt;
              &lt;td&gt;{{item.date| date: 'dd/MM/yyyy'}}&lt;/td&gt;
              &lt;td *ngIf="item.status== 0"&gt;Pending&lt;/td&gt;
              &lt;td *ngIf="item.status== 1"&gt;Accepted&lt;/td&gt;
              &lt;td *ngIf="item.status== 0"&gt;
                  &lt;button (click)='accept(item.id)'&gt;Accept&lt;/button&gt;
              &lt;/td&gt; 
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>
  EDIT 2</p>
  
  <p>I just realized that on my original code,in this part of the code :</p>
  
  <pre><code>aceptar(id: string) {
      this.propuestaService.aceptarPropuesta(id).subscribe(
          data =&gt; {
              this.msg = 'Propuesta Aceptada';
          },
          error =&gt; {
              console.log('error'):  &lt;----- Didn't have this here
          });
  }
  </code></pre>
  
  <p>I didnt have the console.log('error') line, I had something else there, I added it here just to simplify the question. And I see now that the console is saying that that error is happening, so maybe there is something wrong in that part that is preventing the changes on the view. Still the value is changed when I reload manually.</p>
  
  <p>The error says :</p>
  
  <pre><code>SyntaxError: Unexpected end of JSON input
  at JSON.parse (&lt;anonymous&gt;)
  at Response.Body.json (http.umd.js:753)
  at MapSubscriber.eval [as project] (MyService.ts:41)
  at MapSubscriber._next (map.ts:79)
  at MapSubscriber.Subscriber.next (Subscriber.ts:95)
  at XMLHttpRequest.onLoad (http.umd.js:1083)
  at ZoneDelegate.invokeTask (zone.js:265)
  at Object.onInvokeTask (core.umd.js:6078)
  at ZoneDelegate.invokeTask (zone.js:264)
  at Zone.runTask (zone.js:154)
  at XMLHttpRequest.ZoneTask.invoke (zone.js:335)
  </code></pre>