node.js - 在Angular中提交时如何修复未定义的变量

Question

我正在尝试使用角度和节点制作应用程序，当我创建一个新寄存器时，我需要显示一条消息，在这种情况下是一个快餐栏，因为我使用物化角度。

我已经在我的类上声明了一个变量，并在单击提交后给它赋值，但是当它调用服务并收到它的响应时，它没有设置值，控制台一直说它是未定义的变量。这是该组件的完整代码。

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { Clase } from 'src/app/models/clase';
import { ClaseService } from 'src/app/services/clase.service';
import { Catalogo } from 'src/app/models/catalogo';
import { MatSnackBar } from '@angular/material';

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

export class CreateCuentaComponent implements OnInit {
  public title = 'Nueva Cuenta'
  public register_catalogo: Catalogo;
  public register_clase: Clase;
  public alertMessage: string;

  constructor(
    public snackBar: MatSnackBar,
    private _claseService: ClaseService,
  ){
    this.register_catalogo = new Catalogo('', '', null);
    this.register_clase = new Clase('', '' ,'' , null);
  }

  ngOnInit(){
    //console.log(this.alertMessage)
  }

  public onSubmit() {
    let option = this.register_catalogo.codigo.length;
    switch(option) {
      case 1:
        this.CreateClase();
        //this.alertMessage = 'Hola Mundo'
        console.log(this.alertMessage)
        //Pop-up de alerta en la parte inferior
        this.openSnackBar(this.alertMessage, 'Cerrar')
      break;
    }
  }

  CreateClase() {
    //Enviar valores al modelo Clase
    this.register_clase.codigo = this.register_catalogo.codigo;
    this.register_clase.clase =  this.register_catalogo.cuenta;
    this.register_clase.saldo = this.register_catalogo.saldo;
    this._claseService.createClase(this.register_clase).subscribe(
      response => {
        //Crear la nueva clase
        let clase = response.claseStored;
        this.register_clase = clase;

        if(!clase._id) {
          this.alertMessage = 'Error al registrar la clase';
        } else {
          this.alertMessage = 'La clase se ha registrado con éxito';
          this.register_catalogo = new Catalogo('', '', null);
          this.register_clase = new Clase('', '' ,'' , null);   
        }
      },
      error => {
        var alertMessage = <any>error;
        if(alertMessage != null){
          var body = JSON.parse(error.body);
          this.alertMessage = body.message;
          this.register_catalogo = new Catalogo('', '', null);
          this.register_clase = new Clase('', '' ,'' , null);  
        }
      }
    )
  }

  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 2000,
    });
  }
}

为了获得调用我的服务的结果，我希望为 alertMessage 提供一个字符串值并将其显示在小吃栏上。

标签： node.jsangular

Answer 1

为了显示消息，在你设置了alterMessage之后 this.openSnackBar(this.alertMessage, 'Cerrar')应该在里面调用它。由于服务是异步的，因此获取数据需要时间。因此，如果您尝试在回调之前显示消息，它将显示未定义或错误的值（如果值已经从之前的执行中设置，则会显示错误的值）CreateClase()

按照以下步骤更新您的代码

1.this.openSnackBar(this.alertMessage, 'Cerrar')从开关盒中取出

switch(option) {
      case 1:
        this.CreateClase();
        //other code here 
        //this.openSnackBar(this.alertMessage, 'Cerrar') <-REMOVE this from here as it will always return undefined
      break;
    }

2.this.openSnackBar(this.alertMessage, 'Cerrar')设置值后添加this.alertMessage

CreateClase() {
//other codes
this._claseService.createClase(this.register_clase).subscribe(
      response => {
        //Crear la nueva clase
        let clase = response.claseStored;
        this.register_clase = clase;

        if(!clase._id) {
          this.alertMessage = 'Error al registrar la clase';
        } else {
          this.alertMessage = 'La clase se ha registrado con éxito';
          //other code here 
        }

        this.openSnackBar(this.alertMessage, 'Cerrar') //<-call the function after getting the value 

      },
      error => {
        var alertMessage = <any>error;
        if(alertMessage != null){
          var body = JSON.parse(error.body);
          this.alertMessage = body.message;

          this.openSnackBar(this.alertMessage, 'Cerrar') //<-call the function after getting the value
          //other code here  
        }
      }
    )
}