时间戳

首页 > 解决方案 > 保存来自 Javascript 订阅的数据

javascript - 保存来自 Javascript 订阅的数据

问题描述

我是新手。我想从 Rest API 获取数据。从端点加载数据是可以的，但我想稍后在方法之外使用它。例如，我想在另一个函数中总结待办事项的一个属性。在函数 loadTodos() 中，第一个控制台日志显示数据，但第二个控制台日志仅显示“未定义”。如何保存 loadTodos() 返回的值并在以后使用？

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { TodoDomainService } from '../services/todo-domain.service';
import { Todo } from 'app/model/todo';

@Component({
  selector: 'app-todo-listing',
  templateUrl: './todo-listing.component.html',
  styleUrls: ['./todo-listing.component.scss']
})
export class TodoListingComponent implements OnInit {
  todo: Todo;

  constructor(private todoService: TodoDomainService, private router:Router) { }

  public todos;
  
  ngOnInit() {
    this.loadTodos();
    this.todo = new Todo();
  }

  private loadTodos() {
    this.todoService.getTodos().subscribe(
      data => { this.todos = data },
      err => console.error(err),
      () => console.log("todos loaded." +this.todos)
    );
   console.log(this.todos)
  }
 }

private getSum(todos) {
    var sum = 0;
    for(var i = 0; i < todos.length; i++){
    sum += todos.price[i]}
return this.aggregatedSales;
  }

标签： javascriptangularrest

解决方案

console.log("todos loaded." +this.todos)将显示一个响应，因为它是在 observable 完成后执行的。

console.log(this.todos)在你的.subscribe(...)表演之后undefined，因为可观察的还没有完成，也就是说，这条线data => { this.todos = data }还没有被执行。

您正在正确保存数据以供使用。如果您将下一个调用更新为如下所示，则总和将执行：

// from
data => { this.todos = data }

// to
data => {
  this.todos = data;
  this.getSum(this.todos);
}

这是获取 todos 数组并将值添加到变量中然后显示值的stackblitz 示例。userIdsum

推荐阅读