title: Angular Http Observable doesn't update
body: <p>Hey Guys i wrote a little backend which returns some data. Now i want to fetch this data with Angular Http and show new values when i post them in the backend. So the first thing that came to my mind were Observables but currently i can fetch the data onInit but when Posting new Data to the Backend (currently just via Postman) the Fetched data wont update. So if this is the wrong approach tell me how to do this please. Below is my code i used so far:</p>
  
  <p>App Component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  import 'rxjs/add/operator/map';
  import { Observable } from 'rxjs/Observable';
  import { Subscription } from 'rxjs/Subscription';
  import {WeaponServiceService} from './weapon-service.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent implements OnInit {
    weaponTypesarr: IweaponsTypes [] = [
      {name: 'Nahkampf', value: 'melee'},
      {name: 'Fernkampf', value: 'ranged'},
      {name: 'Spezial', value: 'special'},
    ];
    meleeTypesarr: IweaponsTypes [] = [
      {name: 'Klingenwaffen', value: 'klinge'},
      {name: 'Messer', value: 'messer'},
      {name: 'Dolche', value: 'dolch'},
      {name: 'Äxte/Beile', value: 'axt'},
      {name: 'Speere/Stäbe', value: 'speer'},
      {name: 'Stumpfe Hiebwaffen', value: 'stumpf'}
    ];
    rangedTypesarr: IweaponsTypes [] = [
      {name: 'Bogen', value: 'bogen'},
      {name: 'Armbrust', value: 'armbrust'},
      {name: 'Wurfwaffe', value: 'wurfwaffe'},
      {name: 'kleine Schusswaffe', value: 'gun-litte'},
      {name: 'große Schusswaffe', value: 'gun-big'}
    ];
    specialTypesarr: IweaponsTypes [] = [
      {name: 'Exotische Waffen', value: 'exotics'},
      {name: 'Granaten und Exoplosive', value: 'grenade'}
    ];
    rForm: FormGroup;
    post: any;
    weaponName = '';
    weaponType= '';
    impairment= '';
    special= '';
    results: Observable&lt;any&gt;;
    constructor(private fb: FormBuilder , private weaponService: WeaponServiceService) {
      this.rForm = fb.group({
        'weaponName' : [null, Validators.required],
        'weaponType': [null, Validators.required],
        'impairment': [null, Validators.required],
        'special': [null, Validators.required]
      });
    }
    ngOnInit() {
       this.results = this.weaponService.getWeapons();
       this.results.subscribe(data =&gt; {console.log(data); });
    }
  
    generateWeapon(weaponData) {
      this.weaponName = weaponData.weaponName;
      this.weaponType = weaponData.weaponType;
      this.impairment = weaponData.impairment;
      this.special = weaponData.special;
      console.log(weaponData);
    }
  
  }
  
  
  export interface IweaponsTypes {
    name: string;
    value: string;
  }
  </code></pre>
  
  <p>WeaponServiceService (didnt knew it calls it service by its own :D):</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {HttpClient} from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  
  @Injectable()
  export class WeaponServiceService {
  
    constructor( private http: HttpClient) { }
  
    getWeapons() {
      return this.http.get('http://192.168.178.48:3000/getWeapons').map(data =&gt; {
        return(data);
      },
      err =&gt; {
        console.log(err);
      }
    );
    }
  
    createWeapon(weaponData2: any) {
      return this.http.post('http://192.168.178.48:3000/createWeapon', weaponData2)
      .map(
        res =&gt; {
          console.log(res);
        },
        err =&gt; {
          console.log(err);
        }
      );
    }
  }
  </code></pre>
  
  <p>Module:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  import { AppComponent } from './app.component';
  import { HttpClientModule } from '@angular/common/http';
  import {WeaponServiceService} from './weapon-service.service';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpClientModule,
      ReactiveFormsModule,
      NgbModule.forRoot()
    ],
    providers: [WeaponServiceService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>and last but not least the corresponding HTML but currently i just try to log all the values.</p>
  
  <pre><code>&lt;div *ngIf="!name; else forminfo"&gt;
    &lt;form [formGroup]="rForm" (ngSubmit)="generateWeapon(rForm.value)"&gt;
          &lt;h1&gt;Generate Weapon&lt;/h1&gt;
          &lt;label for="WeaponName"&gt;WeaponName&lt;/label&gt;
          &lt;input  class="form-control" type="text" name="weaponName" formControlName="weaponName" id="WeaponName"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="WeaponGroup"&gt;Weapon Group&lt;/label&gt;
                  &lt;select class="form-control" #weaponTypeSelektor formControlName="weaponType" id="WeaponGroup"&gt;
                      &lt;option&gt; Select a Type&lt;/option&gt;
                      &lt;option *ngFor="let types of weaponTypesarr" [value]="types.value"&gt;{{types.name}}&lt;/option&gt;
                  &lt;/select&gt;
            &lt;/div&gt;
            &lt;div class="form-group" *ngIf="weaponTypeSelektor.value == 'melee'"&gt;
                &lt;label for="WeaponTypeMelee"&gt;Weapon Type&lt;/label&gt;
                    &lt;select class="form-control" formControlName="weaponType" id="WeaponTypeMelee"&gt;
                        &lt;option *ngFor="let types of meleeTypesarr" [value]="types.value"&gt;{{types.name}}&lt;/option&gt;
                    &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="form-group" *ngIf="weaponTypeSelektor.value == 'ranged'"&gt;
                  &lt;label for="WeaponTypeRanged"&gt;Weapon Type&lt;/label&gt;
                      &lt;select class="form-control" formControlName="weaponType" id="WeaponTypeRanged"&gt;
                          &lt;option *ngFor="let types of rangedTypesarr" [value]="types.value"&gt;{{types.name}}&lt;/option&gt;
                      &lt;/select&gt;
                &lt;/div&gt;
                &lt;div class="form-group" *ngIf="weaponTypeSelektor.value == 'special'"&gt;
                    &lt;label for="WeaponTypeSpecial"&gt;Weapon Type&lt;/label&gt;
                        &lt;select class="form-control" formControlName="weaponType" id="WeaponTypeSpecial"&gt;
                            &lt;option *ngFor="let types of specialTypesarr" [value]="types.value"&gt;{{types.name}}&lt;/option&gt;
                        &lt;/select&gt;
                  &lt;/div&gt;
          &lt;label for="impairment"&gt;Beeinträchtigung&lt;/label&gt;
          &lt;input class="form-control" type="text" name="Beeinträchtigung" formControlName="impairment" value="" id="impairment"&gt;
          &lt;label for="special"&gt;Spezial&lt;/label&gt;
          &lt;input class="form-control" type="text" name="Spezial" formControlName="special" value="" id="special"&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;input type="submit" class="btn btn-primary" value="Submit Form" [disabled]="!rForm.valid"&gt;
    &lt;/form&gt;
  
    &lt;div  *ngFor="let item of results | async"&gt; {{item.weaponName}} &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;ng-template #forminfo&gt;
    &lt;div class="form-container"&gt;
      &lt;div class="row columns"&gt;
          &lt;h1&gt;{{ name }}&lt;/h1&gt;
  
          &lt;p&gt;{{ weaponType }}&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>So just to be clear. AppComponent starts and fetched  initial data. I post Data into the Db with postman. App Component doesn't recognize new Value.</p>