Question

我是angular的新手，正在尝试更新变量，但是变量在视图中未更新。我正在访问在服务中创建的变量“名称”并对其进行更新，但是它不起作用。当我调用clickme()时，变量名称的值不会在网页上更新，而是显示旧值“无名称”。我想将变量名称值更改为“ rahul”，并将其显示在页面上。

我的服务：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FirstService {
  name:string="no name"

  setName() {
    this.name="rahul"
  }
}

代码：

import { Component, OnInit } from '@angular/core';
import { FirstServiceService } from './first-service.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [FirstService]
})
export class AppComponent implements OnInit {
  account:any
  name:string
  constructor(private userName:FirstService){      }
  ngOnInit(): void {
    this.name=this.userName.name
  }
  clickMe(e){
    this.userName.setName()
  }
}

Answer 1

在像组件这样的服务中无需设置相同的变量名。您可以使用任何所需的变量。

应用内组件

clickMe(e){
    this.name=this.userName.setName();
}

在使用中

getName() {
    return this.name;
}

我希望它将对您有帮助

Answer 2

通常使用这种方式：

服务

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class FirstService {
    private name:string="no name";

    setName(_name: string): void {
        this.name = _name;
    }

    getName(): string {
        return this.name;
    }
}

组件

import { Component, OnInit } from '@angular/core';
import { FirstService } from './first-service.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [FirstService]
})
export class AppComponent implements OnInit {
  account:any
  name:string
  constructor(private firstService: FirstService){      }

  ngOnInit(): void {
    this.name=this.firstService.getName();
  }
  clickMe(e){
    this.userName.setName("rahul");
    this.name=this.firstService.getName();
  }
}

我必须承认，通常不会通过随后从服务中使用它的方法来设置name的值。但是，至少当这些是方法中仅有的两行代码时，才不是。但是我认为您仍然在使用服务，这没关系。

Answer 3

您仅在OnInit中将变量“名称”等于this.userName.name，这是因为您没有看到任何更改-您显示的是变量“名称”，而不是变量this.usuerName。名称。

通常您可以使用一些简单的方法，这是一种吸气剂您可以编写组件

export class AppComponent implements OnInit {
  account:any
  //NOT have a variable "name", just a getter
  get name(){
      return this.userName.name;
  }
  //even if you want you can write
  set name(value)
  { 
      this.userName.name=value;
  }
  constructor(private userName:FirstService){      }
  ngOnInit(): void {
  }
  clickMe(e){
    this.userName.setName()
    //or this.name="George"; //if you include the function set name()
    //or this.userName.name="George"
  }
}

更新角度服务中的变量

3 个答案: