Question

我最近开始使用新的语法来查找最新版本的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以便从表单中读取内容，并将条目添加到todos中的TodoService

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函数中添加日志。并且数据似乎位于TodoService.todos函数中.push之后的.add中。但是，如果我立即关闭模态访问它，则.list()函数返回的内容为空。

此行为似乎有点不可思议，有人遇到过此问题吗？还是我在这里做错了什么？

Answer 1

通过致电服务，您有两种选择。

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

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

选项2 将待办事项定义为BehaviorSubject并订阅此特定主题并处理更改，因此您不必为待办事项创建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 });
  }

希望这能回答您的问题。

Answer 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'],
})

在角度7中保存和访问服务中的数据

2 个答案: