Question

我刚从互联网上下载了一个Ionic项目。

在文件上：src/pages/home/home.ts我有以下代码片段：

...
addTodo() {
    let prompt = this.alertCtrl.create({
        title: 'Add Todo',
        message: 'Describe your todo below:',
        inputs: [
            {
                name: 'title'
            }
        ],
        buttons: [
            {
                text: 'Cancel'
            },
            {
                text: 'Save',
                handler: todo => {
                    if (todo) {
                        this.showLoader();
                        this.todoService.createTodo(todo).then(
                            result => {
                                this.loading.dismiss();
                                this.todos = result;
                                console.log("todo created");
                            },
                            err => {
                                this.loading.dismiss();
                                console.log("not allowed");
                            }
                        );
                    }
                }
            }
        ]
    });
    prompt.present();
}
...

在文件上：src/providers/todos.ts我有以下代码片段：

...
createTodo(todo) {
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', this.authService.token);
        this.http
            .post(
                'http://127.0.0.1:8080/api/todos',
                JSON.stringify(todo),
                { headers: headers }
            )
            .map(res => res.json())
            .subscribe(
                res => {
                    resolve(res);
                },
                err => {
                    reject(err);
                }
            );
    });
}
...

我的问题是：

在文件：home.ts我们有：handler: todo => { ... }参数的内容是什么：todo ?,它是一个对象吗？，它是一个字符串吗？ todo的标题？

里面发生了什么......

this.todoService.createTodo(todo)

Answer 1

按＆＃39;保存＆＃39;在表单中的按钮，处理函数将起作用。

因此，保存按钮的目的是在数据库或后端系统上创建新的待办事项。

我在您的代码中添加了评论：

buttons: [
            {
                text: 'Cancel'
            },
            {
                text: 'Save',
                handler: todo => {
                    if (todo) {
                        this.showLoader(); // <= show loading spinning image maybe
                        this.todoService.createTodo(todo).then( // <= call createTodo of todoService and wait for the server's response.

                        result => {
                            this.loading.dismiss(); // <= loading spinning image close
                            this.todos = result; // <= save server's response ( it would be new todo item info or server's success message. it depends on the api servers defined responses. )
                            console.log("todo created");
                        },
                        err => {
                            this.loading.dismiss();
                            console.log("not allowed");
                        }
                    );

...

并且确认createTodo函数是

createTodo(todo) {
    return new Promise((resolve, reject) => {
        let headers = new Headers(); // <= set header to call post request to the api server.
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', this.authService.token);
        this.http
            .post(
                'http://127.0.0.1:8080/api/todos',
                JSON.stringify(todo),
                { headers: headers }
            )
            .map(res => res.json())
            .subscribe(   // <= when server success to create new todo item, server will send success response or error messages.
                res => {
                    resolve(res); // <= success case
                },
                err => {
                    reject(err); // <= error case
                }
            );
    });
}

我希望这会对你有所帮助:)）

Answer 2

@davidesp你的第一个问题是参数的内容是什么：todo？

todo是依赖于inputs字段的对象，todo是用户定义的名称，您可以为此对象指定任何名称，而无需定义subscribe有两个状态一个成功阻止另一个错误块。这里输入有一个字段title所以它只有一个对象项。

        inputs: [
            {
                name: 'title'
            }
        ]

请检查此link

当您点击Save按钮时，会出现以下代码（用评论描述）

addTodo() {
    let prompt = this.alertCtrl.create({
        title: 'Add Todo',
        message: 'Describe your todo below:',
        inputs: [
            {
                name: 'title'
            }
        ],
        buttons: [
            {
                text: 'Cancel'
            },
            {
                text: 'Save',
                handler: todo => {
                    if (todo) { //check data avaiable
                        this.showLoader(); //call loader
                        this.todoService.createTodo(todo)//call todoService
                           .then(
                            result => { //success block todoService
                                this.loading.dismiss(); //loader dismiss call
                                this.todos = result;
                                console.log("todo created");
                            },
                            err => { //error block todoService
                                this.loading.dismiss(); //loader dismiss call
                                console.log("not allowed");
                            }
                        );
                    }
                }
            }
        ]
    });
    prompt.present();
}

@davidesp你的第二个问题是 this.todoService.createTodo(todo)内发生了什么

createTodo(todo) {
    return new Promise((resolve, reject) => {
        let headers = new Headers(); // server request Headers initilization
        // setting header value ...
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', this.authService.token);
        // Calling http post method here first parameter is url second data and third is header value ...
        this.http
            .post(
                'http://127.0.0.1:8080/api/todos',
                JSON.stringify(todo),
                { headers: headers }
            )
            //map converting response json value 
            .map(res => res.json())
            .subscribe(
                res => { //success block 
                    resolve(res); // resolve promise 
                },
                err => { //error block 
                    reject(err);// reject promise 
                }
            );
    });
}

需要帮助了解此TODO提供商

2 个答案: