时间戳

首页 > 解决方案 > 使用输入表单Angular更新服务变量？

angular - 使用输入表单Angular更新服务变量？

问题描述

我想更新 Angular 服务中的一个变量。当我单击按钮时，我想用输入表单更新变量。

这是服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DashService {
  input: number = 0; //Varible that need update
  constructor(private http: HttpClient) { }
  public getVar() {
    return this.input;
  }
  public insertData(data) {
    this.input = data
  }
}

这是组件

import { DashService } from './dash.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private service: DashService) { }

  ngOnInit() {
    console.log(  this.service.getVar())
  }
}

这是组件 Html

    <form (submit)="onSubmit(input)">
   <div class="form-group">
    <label>Age</label>
      <input type="numer" class="form-control" [(ngModel)]="age" age="age">
   </div>
   <input type="submit" class="btn btn-success" value="Submit">
</form>

标签： angulartypescriptangular5

解决方案

这应该有效。

服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';



@Injectable()
export class DashService {
  input = new BehaviorSubject('test');; //Varible that need update
  constructor(private http: HttpClient) { }

  public getVar() {
    return this.input.asObservable();
  }
  public insertData(data) {
    this.input.next(data);
  }
}

零件

export class AppComponent {
    public age = '';
    constructor(public service: DashService) { }

  ngOnInit() {
    this.service.getVar().subscribe((data) => {
     console.log(data);
   } )
  }

  onSubmit() {
     this.service.insertData(this.age);
  }
}

html

    <form (submit)="onSubmit()">
   <div class="form-group">
    <label>Age</label>
      <input type="numer" class="form-control" [(ngModel)]="age" age="age">
   </div>
   <input type="submit" class="btn btn-success" value="Submit">
</form>

推荐阅读