Javascript 角度可观测不'；t更新

嘿，伙计们，我写了一个小后端，返回一些数据。现在，我想用AngularHTTP获取这些数据，并在后端发布它们时显示新值。因此，我想到的第一件事是可观察到的，但目前我可以在NIT上获取数据，但当将新数据发布到后端（目前仅通过邮递员）时，获取的数据不会更新。因此，如果这是错误的方法，请告诉我如何做到这一点。以下是我迄今为止使用的代码：

应用程序组件：

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<any>;
  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 => {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;
}

模块：

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 { }

最后但并非最不重要的是对应的HTML，但目前我只是尝试记录所有的值

<div *ngIf="!name; else forminfo">
  <form [formGroup]="rForm" (ngSubmit)="generateWeapon(rForm.value)">
        <h1>Generate Weapon</h1>
        <label for="WeaponName">WeaponName</label>
        <input  class="form-control" type="text" name="weaponName" formControlName="weaponName" id="WeaponName">
        <div class="form-group">
            <label for="WeaponGroup">Weapon Group</label>
                <select class="form-control" #weaponTypeSelektor formControlName="weaponType" id="WeaponGroup">
                    <option> Select a Type</option>
                    <option *ngFor="let types of weaponTypesarr" [value]="types.value">{{types.name}}</option>
                </select>
          </div>
          <div class="form-group" *ngIf="weaponTypeSelektor.value == 'melee'">
              <label for="WeaponTypeMelee">Weapon Type</label>
                  <select class="form-control" formControlName="weaponType" id="WeaponTypeMelee">
                      <option *ngFor="let types of meleeTypesarr" [value]="types.value">{{types.name}}</option>
                  </select>
            </div>
            <div class="form-group" *ngIf="weaponTypeSelektor.value == 'ranged'">
                <label for="WeaponTypeRanged">Weapon Type</label>
                    <select class="form-control" formControlName="weaponType" id="WeaponTypeRanged">
                        <option *ngFor="let types of rangedTypesarr" [value]="types.value">{{types.name}}</option>
                    </select>
              </div>
              <div class="form-group" *ngIf="weaponTypeSelektor.value == 'special'">
                  <label for="WeaponTypeSpecial">Weapon Type</label>
                      <select class="form-control" formControlName="weaponType" id="WeaponTypeSpecial">
                          <option *ngFor="let types of specialTypesarr" [value]="types.value">{{types.name}}</option>
                      </select>
                </div>
        <label for="impairment">Beeinträchtigung</label>
        <input class="form-control" type="text" name="Beeinträchtigung" formControlName="impairment" value="" id="impairment">
        <label for="special">Spezial</label>
        <input class="form-control" type="text" name="Spezial" formControlName="special" value="" id="special">
        <br><br>
        <input type="submit" class="btn btn-primary" value="Submit Form" [disabled]="!rForm.valid">
  </form>

  <div  *ngFor="let item of results | async"> {{item.weaponName}} </div>
</div>

<ng-template #forminfo>
  <div class="form-container">
    <div class="row columns">
        <h1>{{ name }}</h1>

        <p>{{ weaponType }}</p>
    </div>
  </div>
</ng-template>

生成武器
武器名称
武器集团
选择一种类型
{{types.name}
武器类型
{{types.name}
武器类型
{{types.name}
武器类型
{{types.name}
比因特
斯佩齐亚尔



{{item.weaponName}
{{name}}
{{weaponType}}

---

所以我要说清楚。AppComponent启动并获取初始数据。我和邮递员一起将数据发布到数据库中。应用程序组件无法识别新值。

更改服务中的这些行

getWeapons() {
return this.http.get('http://192.168.178.48:3000/getWeapons').map(data => {
  return data.json();
}

并在AppComponent中更改这些行

ngOnInit() {
 this.results = this.weaponService.getWeapons();
 //delete this line ---> this.results.subscribe(data => {console.log(data); });
}

因为您使用的是异步管道，所以不需要订阅。

---

希望这有帮助。

在服务中更改这些行

getWeapons() {
return this.http.get('http://192.168.178.48:3000/getWeapons').map(data => {
  return data.json();
}

并在AppComponent中更改这些行

ngOnInit() {
 this.results = this.weaponService.getWeapons();
 //delete this line ---> this.results.subscribe(data => {console.log(data); });
}

因为您使用的是异步管道，所以不需要订阅。

---

---

希望这能有所帮助。

你在哪里订阅？我想最好是OnInit，不是吗？console.log（data）会在控制台中记录数据吗？那么你在哪里调用

createwearm

？哪里都没有？在那之后你还需要重新读取数据。我想你应该重新阅读文本你在哪里订阅？我想最好是OnInit不是吗？console.log（data）在控制台中记录数据吗？那么你在哪里调用

createwearm

？哪里都没有？之后你还需要重新读取数据。我认为你应该重新读取文本。这真的改变了数据的实时加载，因为我已经记录了数据。它已经作为jsonDid发送，日志显示json对象或响应类型数据？因为您提到了组件无法识别该对象。你可以绕过将可观察类型分配给结果。这是可以避免的。伙计们，问题不在于数据没有显示。问题是，当后端的数据发生变化时，前端的数据不会更新。我想我现在明白了，你的代码看起来相当可靠。。。你在后端进行了更改，然后重新加载了你的应用程序，但你的结果不会显示在页面上…我说的对吗。。。？嗯……如果是这样的话，我会做控制台日志记录，你也会这么做。。。请在你的答案中发布。这真的改变了数据的实时加载吗，因为我已经记录了数据。它已经作为jsonDid发送，日志显示json对象或响应类型数据？因为您提到了组件无法识别该对象。你可以绕过将可观察类型分配给结果。这是可以避免的。伙计们，问题不在于数据没有显示。问题是，当后端的数据发生变化时，前端的数据不会更新。我想我现在明白了，你的代码看起来相当可靠。。。你在后端进行了更改，然后重新加载了你的应用程序，但你的结果不会显示在页面上…我说的对吗。。。？嗯……如果是这样的话，我会做控制台日志记录，你也会这么做。。。请把你的答案写进去。。