以 Angular 7 保存和访问服务中的数据答案

【问题标题】：Saving and accessing data from service in angular 7以 Angular 7 保存和访问服务中的数据
【发布时间】：2019-07-17 16:38:25
【问题描述】：

我最近开始使用新语法研究 Angular 的最新版本，但我熟悉 Angular v1。

我正在做一个 ionic(v4.12.0) 项目，下面是示例 angular(v7.2.15) 服务TodoService

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class TodoService {
  private todos = [];

  constructor(private http: HttpClient) {
    console.log('Constructor TodoService');
  }

  list() {
    // log shows this.todos as empty, always
    return this.todos;
  }

  add(todo object) {
    this.todos.push(todo);
    // log shows this.todos having 1 element now. it never goes beyond 1 irrespective of the number of todos added from the modal form 
  }

}

我创建了一个模态TodoAddPage 来读取表单并将条目添加到TodoService 中的todos

import { Component, Input, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ModalController } from '@ionic/angular';
import { TodoService } from './todo.service';

@Component({})
export class TodoAddPage implements OnInit {
    constructor(
      private modalController: ModalController,
      private todoService: TodoService
    ) {}

    close() {
      this.modalController.dismiss({
        dismissed: true
      });
    }

    onSubmit(todo: object) {
      this.todoService.add(todo);
      this.close();
    }
}

一个页面TodosPage 列出来自TodoService 的待办事项

import { Component, OnInit } from '@angular/core';
import { AlertController, ModalController } from '@ionic/angular';
import { TodoAddPage } from './todo-add.page';
import { TodoService } from './todo.service';

@Component({})
export class TodosPage implements OnInit {

  public todos = [];

  constructor(
    private modalController: ModalController,
    private todoService: TodoService
  ) {
    this.todos = this.todoService.list();
  }

  ngOnInit() {
  }

  async add() {
    const modal = await this.modalController.create({
      component: TodoAddPage,
      componentProps: { value: 123 }
    });

    await modal.present();

    const { data } = await modal.onWillDismiss();
    console.log(data);

    console.log(this.todoService.list()); // Issues: This is always empty
  }

}

问题是TodoService.list() 总是返回空列表。我检查了在TodoService.add 函数中添加日志。并且数据似乎在.add 函数中.push 之后的TodoService.todos 中。但是如果我访问它立即关闭模式，.list() 函数返回的内容是空的。

这种行为似乎有点奇怪，有人遇到过这个问题吗？还是我在这里做错了什么？

【问题讨论】：

你能不能创建一个 stackblitz 以便我们运行它

标签： angular ionic-framework

【解决方案1】：

通过调用服务，您有两种选择。

选项 1 访问待办事项列表本身。这是获得预定义待办事项的最佳情况：

 constructor(private todoService: TodoService){
    this.todos = this.todoService.todos;
  }

选项 2 将 todos 定义为 BehaviorSubject 并订阅此特定主题并处理更改，因此您不必为 todos 创建 getter 方法。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class TodoService {
  private todos = [];
  todosSubject = new BehaviorSubject<any[]>([]);

  constructor(private http: HttpClient) {}

  list(): Observable<any[]> {
    return this.todosSubject.asObservable();
  }

  add(todo: any) {
    this.todos.push(todo);
    this.todosSubject.next(this.todos);
  }

}

并在您的页面中调用订阅列表功能：

  public todos = [];

  constructor(private modalController: ModalController, private todoService: TodoService) 
  {
    this.getTodos();
  }

  getTodos()
  {
    this.todoService.list().subscribe((data) => { this.todos = data });
  }

希望这能回答你的问题。

【讨论】：

【解决方案2】：

找出问题所在。

在发布问题时，我抽象出组件定义，如下所示

@Component({})
export class TodoAddPage implements OnInit {}

但Component的实际内容是

@Component({
  selector: 'app-todo-add',
  templateUrl: './todo-add.page.html',
  styleUrls: ['./todo-add.page.scss'],
  providers: [TodoService] // This was the one causing the issue
})

删除了上面的提供者（不确定我何时或为什么添加那里）并解决了问题。

@Component({
  selector: 'app-todo-add',
  templateUrl: './todo-add.page.html',
  styleUrls: ['./todo-add.page.scss'],
})

【讨论】：