Javascript 如何在Angular中更改类变量

登录（）函数后，我需要更改

名称

和

id

。但是这个

that.name = vk.data.user.first_name + ' ' + vk.data.user.last_name;
that.id = vk.data.user.id;

创建局部变量

name

和

id

。如何更改LoginComponent类的名称和id

登录组件：

import { Component, Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFire } from '../shared';
import {
    AngularFireDatabase,
    AngularFireDatabaseModule,
    FirebaseListObservable,
    FirebaseObjectObservable
} from 'angularfire2/database';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})

@Injectable()
export class LoginComponent {
    public error: any;
    public name: string;
    public id: number;

    constructor(public afService: AngularFire, private router: Router, public db: AngularFireDatabase) { }

    async login() {
        var that = this;    
        var vk = {
            data: { user: { first_name: '', last_name: '', id: null } },
            appID: 6480684,
            init: new Promise(function (resolve, reject) {

                VK.init({ apiId: 6480684 });
                load();

                function load() {
                    VK.Auth.login(authInfo);

                    function authInfo(response) {
                        if (response.session) {
                            vk.data.user = response.session.user;
                            resolve();
                        } else {
                            reject();
                        }
                    }
                }
            })
        }

        async function data() {
            await vk.init;
            console.log('vk login');
            that.name = vk.data.user.first_name + ' ' + vk.data.user.last_name;
            that.id = vk.data.user.id;
            that.db.object('users/' + vk.data.user.id).set({
                id: that.id,
                displayName: that.name
            });
        }
        await data();
    }

聊天组件：

import { Component, AfterViewChecked, ElementRef, ViewChild, Input, OnChanges } from '@angular/core';
import { FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
import { LoginComponent } from '../../login/login.component';

import { AngularFire } from '../../shared';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements AfterViewChecked, OnChanges {
  @ViewChild('scroller') private myScrollContainer: ElementRef;
  @Input() channelId;

  public messages: FirebaseListObservable<any>;
  imageSrc: string;
  public newMessage: string;
  public newImage: any;

  constructor(public afService: AngularFire, public afAuth: AngularFireAuth, public login: LoginComponent) {}

  ngOnChanges() {
    this.messages = this.afService.getMessages(this.channelId);
  }

        async sendMessage() {
            var name;
            if (this.afAuth.auth.currentUser !== null) {
                name = await this.afService.getDisplayName();
            } else {
                name = this.login.name;
                console.log(name);
            }
        this.afService.sendMessage(this.channelId, this.newMessage, name);
    this.newMessage = '';
  }

import{Component，AfterViewChecked，ElementRef，ViewChild，Input，OnChanges}来自“@angular/core”；
从“angularfire2/数据库”导入{FirebaseListObservable}；
从'angularfire2/auth'导入{AngularFireAuthModule，AngularFireAuth}；
从“../../login/login.component”导入{LoginComponent}；
从“../../shared”导入{AngularFire}；
@组成部分({
选择器：'应用程序聊天'，
templateUrl:'./chat.component.html'，
样式URL:['./chat.component.css']
})
导出类ChatComponent实现AfterViewChecked，OnChanges{
@ViewChild（“滚动条”）私有myScrollContainer:ElementRef；
@输入（）信道ID；
公开信息：FirebaseListObservable；
imageSrc:string；
公共newMessage:string；
公共新形象：任何；
构造函数（公共afService:AngularFire，公共afAuth:AngularFireAuth，公共登录名：LoginComponent）{}
ngOnChanges（）{
this.messages=this.afService.getMessages（this.channelId）；
}
异步发送消息（）{
变量名；
if（this.afAuth.auth.currentUser！==null）{
name=等待这个.afService.getDisplayName（）；
}否则{
name=this.login.name；
console.log（名称）；
}
this.afService.sendMessage（this.channelId，this.newMessage，name）；
this.newMessage=''；
}

使用胖箭头操作符

（=>）

而不是

函数

，这样您就不需要使用

那个

而不是

这个

。

登录（）

被调用？@ConnorsFan从login.component.html点击按钮后点击

Sing in using VK

的可能重复是否值得注意的是，您的代码中有变量VK和VK不相同？您是否运行代码并检查控制台是否有错误？