【问题标题】:Angular variable returns undefined in some points of the controller but on others it returs his value角度变量在控制器的某些点返回未定义但在其他点返回他的值
【发布时间】:2021-03-26 10:56:50
【问题描述】:

我正在使用一个控制器,从服务中获取一组值。当我从服务中获得值时,我将变量的值设置为该数组的第一个元素,然后我对该变量执行 console.log 并正确返回该值。当我尝试使用这个值进行一些操作时,问题就出现了,然后当我检查变量时,我得到了 undefied 并且我不明白为什么。

这是我的代码:

export class DetailTaskComponent implements OnInit {

  constructor(private taskService: TaskService, private route: ActivatedRoute, private authSservice: AuthService) { }

  // old variable
  taken = false;

  startButton = true;
  pauseButton = true;
  finishButton = true;

  task;
  ////////////////////////////

  // Trabajo con 2 tasks en este componente globalTask y userTask, la primera es la Task en general y la otra es lo que ha hecho el
  // usuario actual con esta Task.

  // Variable que guarda la Task de nivel global
  globalTask: Task;

  // Variable que guarda la Task a nivel del usuario actual
  userTask: UserTask;
  workingTask: UserTask;

  // Variable array de tipo UserTask, hay que usar un array porque aunqeu solo haya un registro
  usersTasks: UserTask[];

  // Esta función recupera la Task a nivel global a partir del parametro :id
  async getTask(id){
    console.log('getTask');
    this.globalTask = await this.taskService.getTask$(id).pipe(first()).toPromise();
  }

  // Si no hay información en el historial del usuario con esa Task creamos una entrada, aunque solo consulte la Task y no interactue
  async setTaskUserHistoric(set: UserTask){

    console.log(`Entro en la funcuión que deberia crear la entraea`);
    set.id = uuidv4();
    set.status = 'Pendent';

    this.workingTask = set;

    await this.taskService.setTaskHistoric(set);

  }

  // Esta función recupera lo que ha hecho el usario ya con la tare actual, si no ha trabajado nunca con ells
  // lo añade a la tabla, para cuando empìece a interactuar con ella no teneer que controlar que infromación hay que crear o guardar
  async getUserTask(update: UserTask){

    console.log('Antes de recuperar el array');

    this.usersTasks = await this.taskService.getHistoric(update).pipe(first()).toPromise();

    console.log(`Total de entradas encontradas: ${this.usersTasks.length}`);

    // Si el usuario ha trabajado alguna vez con la task, ni que sea solo consultarla, tendremos un registro, en caso contrario el array valdrá 0 y
    // habrá que crear una entrada
    if(this.usersTasks.length > 0){
      this.workingTask = this.usersTasks[0]; // Si existre u registro lo guardamos en la vraiable userTask, esta variable es la que guardara todo el progreso del usuario
      console.log('Se ha encontrado una entrada');
      console.log(this.workingTask);
    }
    else {
      this.setTaskUserHistoric(update); // Para crear el registro le paso los datos del usuario y de la task
      console.log(`No se ha encontrado ninguan entrada`);
    }

  }

  // Funciones para manipualr las Tasks
  startTask(){}
  pauseTask(){}
  finishTask(){}

  // Esta función congigura la botonera, por defecto todos los botones estan desactivados y en función del estado de la Task para el usuario
  // se activan o desactivan el boton de play/pause/finish.
  // Esta función no tiene parametros porque usa los variables de userTask;
  setKeypad(task){
    console.log(this.workingTask);
    console.log(task);
    // if(this.userTask.status === 'Pendent'){
    //   console.log(`El usuario nunca ha trabajado con la tarea`);
    // }
  }

  async ngOnInit(): Promise<void> {

    // Al cargar el componente recupero el parametro id de la url y lo paso a la función que recupera la task y la guarda en la globalTask
    await this.getTask(this.route.snapshot.paramMap.get('id'));

    // Ejecuto la función que valida si el usuario ya ha trabajado con la Task y que en cualquier caso informará la variable userTask para poder  guardar el progreso
    // Información mínima para encontrar el historial del usuario
    let check: UserTask = {
      id_task: this.globalTask.id,
      id_user: await this.authSservice.getUser()
    }

    console.log('Antes de revisar si el usario ya tiene una entrada en el user_task');
    this.getUserTask(check);

    // Configuramos la botonera
    this.setKeypad(this.workingTask);

  }

}

Resumin,在 onInit 上,我调用获取值列表的函数,将第一个元素分配给变量 workingTask(此时 console.log)返回值,但是当我进入 setKeypad() 函数时我无法读取workingTask 变量,因为它返回未定义。

【问题讨论】:

    标签: javascript angular angular-controller


    【解决方案1】:

    getUserTask 是一个异步函数,因此您必须等待其执行才能正确设置 workingTask

    await this.getUserTask(check);
    
    // Configuramos la botonera
    this.setKeypad(this.workingTask);
    

    【讨论】:

      猜你喜欢
      • 2018-04-19
      • 1970-01-01
      • 2020-01-17
      • 2011-05-29
      • 1970-01-01
      • 2016-03-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多