Question

我正在尝试使用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作为服务是开发大项目的最佳方式吗？

Answer 1

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

 > /usr/bin/git rev-parse --is-inside-work-tree # timeout=10
Fetching changes from the remote Git repository
 > /usr/bin/git config remote.origin.url ssh://foo/bar.git # timeout=10
Fetching upstream changes from ssh://foo/bar.git
 > /usr/bin/git --version # timeout=10
using GIT_SSH to set credentials 
 > /usr/bin/git fetch --tags --progress ssh://foo/bar.git +refs/heads/*:refs/remotes/origin/*
 > /usr/bin/git rev-parse refs/remotes/origin/bar^{commit} # timeout=10
 > /usr/bin/git rev-parse refs/remotes/origin/origin/bar^{commit} # timeout=10
 > /usr/bin/git rev-parse origin/bar^{commit} # timeout=10

您可以对自己的应用做同样的事情，但拥有本地数据，例如addTodo(todo) { //make api request, handle response, return result to component } getTodos() { //make api request, handle response, return result to component }，因此您的服务可能如下所示：

todos

在离线会话期间，您可以使用这些待办事项！：）

然后关闭组件，您有错误：

不要将@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) } }注入构造函数，构造函数仅适用于提供者
您正在将模板驱动的表单与活动表单混合
在items函数中，您指的是addTodo，但组件中没有this.items.id

好的，让我们看看你的表单，在这里我将表单更改为模板驱动，所以完全删除item。您也不需要双向绑定。您可以构造表单，以便从表单中获取的对象格式正确，以便可以按原样推送到待办事项。您可以使用FormGroup属性和name绑定表单来实现您的表单。 ngModel属性将成为对象中的键，当然您在表单中输入的值将成为键的相应值。所以你的表格看起来像这样：

name

这会产生（<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>）像这样的对象：

myForm.value

......当它是空的时候。在这里，你的对象中还有一个属性{ "id": "", "title": "", "message": "" }，所以在提交之后，在你的数组中推送这个新的待办事项之前，让我们添加那个属性键：

done

请从官方文档中了解Angular，他们有很好的教程。根据您在此处的代码，请查看 Services ，它使用本地mockdata，就像您想要的那样。另请参阅 Forms ，模板驱动和模型驱动表单之间的区别！

作为奖励，这里有一个 Plunker ：）

Angular 2接口和LocalStorage服务

1 个答案: