將數據發布到我的PHP Web服務-ANGULAR 2

Question

我在玩angular2，嘗試在服務器端使用php和mysql進行簡單的CRUD操作。

我創建了一個php服務，當我使用CHROME POSTMAN發帖時會保存一個名稱，它工作得很好

這是我的網址- http://funiks.com/adminv8/products-api/crudtable-add.php ，這是怎么傳遞郵差變量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 =>{          });
  }

}

請給我指導，我應該在submitdata()函數中submitdata()以便將數據提交到mysql數據庫。

問題是名稱仍未保存在數據庫中，並插入了2條空白記錄，我的網址被調用了兩次

看到這里 - 點擊這里查看圖片

如果在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>

零件

      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 =>{
                ...
            });
         }
     }