Question

我试图在Angular服务中管理一个数组，如下所示：

import { TodoItem } from '../models/todo-item.model';

@Injectable()
export class TodoService {
  //local storage key name
  private readonly lsKey = 'pi-todo';
  private _todos: Array<TodoItem>;

  //Gets the todo items from local storage
  public fetchTodos(): Array<TodoItem> {
    //Either get the items if they exist, or get an empty array
    this.todos = (JSON.parse(localStorage.getItem(this.lsKey)) as Array<TodoItem>) || [];

    return this.todos;
  }

  //Adds the todo item to local storage
  public addTodo(todo: TodoItem): Array<TodoItem> {
    if (todo) {
      //Better way to do this?
      let tempTodos = this.todos;
      tempTodos.push(
        Object.assign(
          {
            completed: false
          },
          todo
        )
      );

      this.todos = tempTodos;

      return this.todos;
    }
  }


  private get todos(): Array<TodoItem> {
    return this._todos || [];
  }

  private set todos(todos: Array<TodoItem>) {
    this._todos = todos;
    localStorage.setItem(this.lsKey, JSON.stringify(this._todos));
  }
}

将todo项目添加到todos数组时，我尝试this.todos.push(...);，但之后不会触发setter。如何在不使用临时数组的情况下执行此操作？

Answer 1

我建议将“保存到本地存储”代码移动到由setter和add调用的单独方法。

  //Adds the todo item to local storage
  public addTodo(todo: TodoItem): Array<TodoItem> {
    if (todo) {
      this.todos.push(
        Object.assign(
          {
            completed: false
          },
          todo
        )
      );

      this.save();
      return this.todos;
    }
  }

  private set todos(todos: Array<TodoItem>) {
    this._todos = todos;
    this.save();
  }

  private save() {
     localStorage.setItem(this.lsKey, JSON.stringify(this._todos));
  }

Answer 2

是的，因为您没有将其设置为新值。解决方法是：不要进入数组，抓取当前数组，将其分配给临时变量，然后替换为新数组。像这样：

triggerSet(newValue) {
   const tempArray = this.todos;
    tempArray.push(newValue);
     this.todos = tempArray;
}

向元素

2 个答案: