Question

我正在玩angular2，试图在服务器端使用php和mysql进行简单的CRUD操作。

我创建了一个php服务，当我使用 CHROME POSTMAN 发布时保存了一个名字，它完美无缺

这是我的网址 - http://funiks.com/adminv8/products-api/crudtable-add.php 这就是如何在POSTMAN name: jessica

中传递变量

在角度我创建了一个表单，其add.html如下：

  <form>
  <div class="form-group">
    <label for="name">First Name:</label>
    <input type="text" class="form-control" id="fname" #fname ([ngModel])="name">
  </div>
   <button type="submit" class="btn btn-default" (click)="submitdata()">Submit</button>
</form>

和add.ts

  import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-operationadd',
  templateUrl: './operationadd.component.html',
  styleUrls: ['./operationadd.component.css']
})
export class OperationaddComponent implements OnInit {
public name:string;
  constructor(private http: Http) { }

  ngOnInit() {
  }

  submitdata(){
    console.log("Data Submitted");
   // console.log(name);
    this.http.post('http://funiks.com/adminv8/products-api/crudtable-add.php', {name: this.name})
            .map((res:Response) => res.json())
            .subscribe(result =>{          });
  }

}

Pleade指导我应该在submitdata()函数中写什么，以便将数据提交到mysql数据库。

问题是名称仍未保存在数据库中并且其插入2个空白记录，我的网址被调用两次

见这里 - click here to see the image

如果在add.ts我写{this.name}而不是{name: this.name}，那么它会给我错误说：预期

Answer 1

您的输入没有模型绑定。试试这个：

<强> HTML

<form #myForm="ngForm" (ngSubmit)="submitdata(); myForm.reset();">
  <div class="form-group">
    <label for="name">First Name:</label>
    <input type="text" class="form-control" id="fname" ([ngModel])="name">
  </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

<强> COMPONENT

      import { Component, OnInit } from '@angular/core';
        import { Http, Response } from '@angular/http';

        @Component({
          selector: 'app-operationadd',
          templateUrl: './operationadd.component.html',
          styleUrls: ['./operationadd.component.css']
        })
        export class OperationaddComponent implements OnInit {

          public name:string;

          constructor(private http: Http) { }

          ngOnInit() {
              ...
          }

          submitdata(){
             console.log("Data Submitted");
             console.log(this.name);
             this.http.post('http://funiks.com/adminv7/offline-api/login.php', {name: this.name})
            .map((res:Response) => res.json())
            .subscribe(result =>{
                ...
            });
         }
     }

POST数据到我的php网络服务 - ANGULAR 2

1 个答案: