如何在 angular 中的另一个函数中访问在一个函数中分配的全局变量

Question

我是 angular 的新手。

我有表格-control.component.ts文件因为我已经全局声明了这 3 个变量

 name1:any;
 pw :any';
 g :any;

这3个变量我在一个函数中用过

displayAccountInfo(account:Account)
{
 this.name1=account.name;
 this.pw=account.password;
 this.g=account.gender;
}

我想在 ClickMe() 函数中显示这 3 个变量的值

result:string;

ClickMe():void {
  this.result =' *saved dataItems:  ' + this.name1 +this.pw +this.g ;
}

但我得到了这些输出

 *saved dataItems: undefined undefined undefined

我必须在 displayAccountInfo() 函数中显示分配给这些变量的值

我在 Save 方法中调用了 displayAccountInfo()

 Save():void{
 let account:Account=this.registerform.value;
 account.languages=this.checkedList;
 this.displayAccountInfo(account);

}

这是整个文件

import { Component, OnInit } from '@angular/core';
import {Account}  from './account.entity'
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';

 @Component({
 selector: 'app-form-control',
 templateUrl: './form-control.component.html',
 styleUrls: ['./form-control.component.css']
})
export class FormControlComponent implements OnInit {

genders:any;
languages:any;
registerform:FormGroup;
checkedList:string[];
certificates:any;

name1:any;
pw :any;
g :any;

constructor(
 private formbuilder:FormBuilder) {  }

 ngOnInit() {

      this.checkedList=[];

      this.certificates=[
        {value:'c1' ,display: 'Microsoft'},
        {value:'c2' ,display: 'Oracle'},
        {value:'c3' ,display: 'Angular'},
        {value:'c4' ,display: 'Java'},
      ];

      this.genders=[
        {value:'F' ,display:'Female'},
        {value:'M' ,display:'Male'}
      ];

      this.languages=[
        {id:'1' ,name:'C#'},
        {id:'2' ,name:'Java'},
        {id:'3' ,name:'typescript'},
        {id:'4' ,name:'Html'}
      ];

    this.registerform=this.formbuilder.group({
        name:'',
        password:'',
        gender:this.genders[0].value,
        languages:[],
        certificates:[]
    });


  }

Save():void{
 let account:Account=this.registerform.value;
 account.languages=this.checkedList;
 this.displayAccountInfo(account);

}

displayAccountInfo(account:Account)
{
 this.name1=account.name;
 this.pw=account.password;
 this.g=account.gender;

  for(var i=0; i< account.languages.length; i++)
  {
    var lang=account.languages[i];
  }

  for(var j=0; j< account.certificates.length; j++)
  {
    var cer=account.certificates[i];
  }

 }

 Checkboxchange(option,event)
{
if(event.target.checked)
{
  this.checkedList.push(option.id);
}
else
{
  for(var i=0;i<this.languages.length;i++)
  {
      if(this.checkedList[i]==option.id)
      {
        this.checkedList.splice(i,1);
      }
  }
} 
}


result:string;

ClickMe():void {
  this.result =' *saved dataItems:  ' + this.name1 +this.pw +this.g ;
 }


}

Answer 1

将默认值分配给全局变量

 name1:any = '';
 pw :any = '';
 g :any = '';

Answer 2

按照下面的方法创建formcontrol.ts

export var formcontrol = {
  name1: 'name',
  pw: 'pw',
  g: 'gender',

然后你可以简单地导入它并使用它

import { formcontrol } from 'your/path/formcontrol';

displayAccountInfo(account:Account) {
 formcontrol.name1 = account.name;
 formcontrol.pw = account.password;
 formcontrol.g = account.gender;
}

我个人不会那样使用它，我会创建一个服务来为我提供这个变量。
Here 您可以阅读有关 angular 服务的更多信息

如何在 angular 中的另一个函数中访问在一个函数中分配的全局变量

How to access global variables assigned in one function in another function in angular

angular-directive

angular

angular4-forms

angular8