Javascript Angular 2接口和本地存储服务

我试图使用

localstorage

作为一种服务来保存一些数据，因此我创建了一个接口和一个组件来调用这两个组件（localstorage服务和接口）

接口：

export interface Items {
    id: number;
    title: string;
    message: string;
    done: boolean;
}

服务：

@Injectable()
export class LocalStorageService {

    saved: string = localStorage.getItem('currentItem');
    currentItem: string = (localStorage.getItem('currentItem') !== null) ? JSON.parse(this.saved) : [  ];
    todos: any = this.currentItem;

    save(id, title, message, done) {
        this.todos.push({
            id: id,
            title: title,
            message: message,
            done: false
        });

        localStorage.setItem('currentItem', JSON.stringify(this.todos));
    }

}

组成部分：

export class AddComponent implements OnInit {

    todoForm: FormGroup;

    currentItem: string;
    todos: any;

    constructor(fb: FormBuilder,
                private router: Router,
                private storageService: LocalStorageService,
                private items: Items) {
        this.currentItem = (localStorage.getItem('currentItem') !== null) ? JSON.parse(localStorage.getItem('currentItem')) : [  ];
        this.todos = this.currentItem;

        this.todoForm = fb.group({
            id: '',
            title: '',
            message: '',
            done: ''
        });
    }

    addTodo(event) {
        console.log(this.todoForm.value);
        this.storageService.save(this.items.id, this.items.title, this.items.message, this.items.done)
        this.router.navigate(['./list']);
    }

   ngOnInit() {}

}

HTML

：

<div class="container">
    <form (submit)="addTodo($event)">

        <div class="form-group">
            <label>Id:</label>
            <input [(ngModel)]="id" class="textfield form-control" name="id" />
        </div>

        <div class="form-group">
            <label>Titulo:</label>
            <input [(ngModel)]="title" class="textfield form-control" name="title">
        </div>

        <div class="form-group">
            <label>Mensagem:</label>
            <input [(ngModel)]="message" class="textfield form-control" name="message">
        </div>

        <button type="submit" class="btn btn-success">Salvar</button>
    </form>
</div>

身份证件：
提图洛：
策略：
萨尔瓦多

当我试图访问

html

文件时，我有很多错误

我正在对Angular 2进行概念验证，我想将

localStorage

用作服务和接口。我知道我不需要将

localStorage

作为一项服务来完成它，但在一个大项目中，我认为我需要将它作为一项服务来使用

我将要开发的项目必须脱机工作，因此我将在所有组件中调用

localStorage

，创建此localStorage服务

有人知道我如何解决这个问题吗

---

使用interface和LocalStorage作为服务是开发大型项目的最佳方式？

您的代码中有很多错误。我可以先跳过本地存储。您可以按原样使用服务，而无需混合使用本地存储。在现实生活中的应用程序中，您可以通过http调用来检索数据，如下所示：

addTodo(todo) {
  //make api request, handle response, return result to component
}

getTodos() {
  //make api request, handle response, return result to component
}

@Injectable() 
export class LocalStorageService {

  todos: Item[];

  constructor() {
    // lets add one item by default
    this.todos = [{id:1,title:'title1',message:'message1',done:false}]
  }

  getTodos() {
    return this.todos;
  }

  addTodo(todo) {
    this.todos.push(todo)
  }
}

<form #myForm="ngForm" (ngSubmit)="addTodo(myForm.value)">
  <label>Id:</label>
  <input name="id" ngModel />
  <label>Titulo:</label>
  <input name="title" ngModel />
  <label>Mensagem:</label>
  <input name="message" ngModel />
  <button type="submit">Salvar</button>
</form>

您可以对您的应用程序执行完全相同的操作，但有一个本地数组，例如

todos

，因此您的服务可能如下所示：

addTodo(todo) {
  //make api request, handle response, return result to component
}

getTodos() {
  //make api request, handle response, return result to component
}

@Injectable() 
export class LocalStorageService {

  todos: Item[];

  constructor() {
    // lets add one item by default
    this.todos = [{id:1,title:'title1',message:'message1',done:false}]
  }

  getTodos() {
    return this.todos;
  }

  addTodo(todo) {
    this.todos.push(todo)
  }
}

<form #myForm="ngForm" (ngSubmit)="addTodo(myForm.value)">
  <label>Id:</label>
  <input name="id" ngModel />
  <label>Titulo:</label>
  <input name="title" ngModel />
  <label>Mensagem:</label>
  <input name="message" ngModel />
  <button type="submit">Salvar</button>
</form>

这些TODO可在脱机会话期间使用！：）

---

然后转到您的组件，您有以下错误：

不要将

项

注入构造函数，构造函数仅用于提供程序

您正在将模板驱动的表单与反应式表单混合使用

在您的

addTodo

函数中，您指的是例如

this.items.id

，但组件中没有

项

好的，让我们看一下您的表单，这里我将您的表单更改为模板驱动，所以将

FormGroup

全部删除。您也不需要双向绑定。您可以构造表单，以便从表单中获取的对象的格式正确，从而可以按原样推送到TODO。这可以通过使用

name

属性和绑定表单的

ngModel

在表单中实现。

name

属性将成为对象中的键，当然，您在表单中输入的值将成为键的对应值。因此，您的表单如下所示：

addTodo(todo) {
  //make api request, handle response, return result to component
}

getTodos() {
  //make api request, handle response, return result to component
}

@Injectable() 
export class LocalStorageService {

  todos: Item[];

  constructor() {
    // lets add one item by default
    this.todos = [{id:1,title:'title1',message:'message1',done:false}]
  }

  getTodos() {
    return this.todos;
  }

  addTodo(todo) {
    this.todos.push(todo)
  }
}

<form #myForm="ngForm" (ngSubmit)="addTodo(myForm.value)">
  <label>Id:</label>
  <input name="id" ngModel />
  <label>Titulo:</label>
  <input name="title" ngModel />
  <label>Mensagem:</label>
  <input name="message" ngModel />
  <button type="submit">Salvar</button>
</form>

…当它是空的。在这里，您的对象中还有一个属性

done

，因此在提交后，在数组中推送此新todo之前，让我们添加该属性键：

addTodo(value) {
  // push the missing value to object
  value.done = false;
  // call method in service to save the new todo
  this.storageService.save(value)
  // update the list of todos
  this.todos = this.storageService.getTodos();
}

请务必阅读官方文档中关于Angular的内容，他们有相当好的教程。根据这里的代码，请查看使用本地mockdata的，正如您所希望的那样。还要看看，模板驱动和模型驱动表单之间的区别

---

作为奖励，这里有一个可以玩：）

尝试访问html文件时出现的错误？编译时错误？是的，当我试图访问html文件时，我有一个错误<代码>异常：未捕获（承诺中）：错误：DI错误和

未处理的承诺拒绝：t！没有提供程序；区域：角度；任务：承诺；值：

是否已将LocalStorageService添加到组件装饰器中的提供程序数组中？请将此用作感谢！你帮了我很多！我已经被视为快速入门，但我试图以不同的方式来做，我不知道如何使用本地存储和服务。欢迎您！是的，我认为使用上面提到的服务绝对是最好的方式，因为它模仿了你在“现实生活”中的做法。当您继续使用真实数据时，您可以使用相同的方法，只需切换到http而不是本地数据，因此这是一个很好的附加条件，当您切换到http时：）很高兴我能提供帮助，我记得开始时我对Angular 2有多困惑，需要一段时间才能掌握窍门（至少对我来说），但当您这样做时，它很棒！）祝你有美好的一天和快乐的编码！：）