張貼角2的形式數據到symfony api

Question

我有角2的形式，我想使用symfony API web服務將它保存在數據庫中，我試圖從角形式獲取數據並將其作爲json對象發送給通過發送http請求的URL端點。

這是component.html

<div class="ui raised segment"> 
    <h2 class="ui header">Demo Form: Sku</h2> 
    <form #f="ngForm" 
     (ngSubmit)="onSubmit(f.value)" 
     class="ui form"> 

    <div class="field"> 
     <label for="skuInput">SKU</label> 
     <input type="text" 
      id="skuInput" 
      placeholder="SKU" 
      name="sku" ngModel> 
    </div> 
    <div class="field"> 
     <label for="select1" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label> 
     <select class="form-control" name="note1" id="select1" ngModel> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     </select> 

     <label for="select2" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label> 
     <select class="form-control" name="note2" id="select2" ngModel> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     </select> 

     <label for="select3" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label> 
     <select class="form-control" name="note3" id="select3" ngModel> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     </select> 

    </div> 

    <button type="submit" class="ui button">Submit</button> 
    </form> 
</div> 

服務：

import { Injectable } from '@angular/core'; 
import {Http, Response, Headers, RequestOptions} from '@angular/http'; 
import { savePostEvaluationapi} from '../../constants/api.endpoints'; 


@Injectable() 
export class EvaluationService { 
    http: Http; 

    constructor(protected _http: Http) { 
    this.http = _http; 
    } 

    savePostEvaluationService(postEvalform) { 
    const headers = new Headers({'Content-Type': 'application/json'}); 
    const options = new RequestOptions({headers: headers}); 
    const data = JSON.stringify(postEvalform); 

    return this.http.post("http://evaluation.dev/app_dev.php/api/savePostEvaluation", data, options).map((res: Response) => res.json()); 
    } 

} 

和component.ts

import {Component, OnInit} from '@angular/core'; 
import {EvaluationService} from '../../services/evaluation/evaluation.service'; 

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

    constructor(private evaluationService: EvaluationService) { 
    } 

    ngOnInit() { 
    } 

    // savePostEvaluation(data: Object) { 
    // this.evaluationService.savePostEvaluation(data).subscribe((dataResponse) => { 
    //  console.log('execute' + dataResponse); 
    // }); 
    // } 
    savePostEvaluation(form: any): void { 

     this.evaluationService.savePostEvaluationService(form) 
     .subscribe(
      data => data.json(), 
     () => console.log('done send form to api') 
     ); 
    } 

這裏是symfony的Web服務：

/** 
    * @Rest\View() 
    * @Rest\Post("/savePostEvaluation") 
    * @return Response 
    * @internal param Request $request 
    */ 

    public function savePostEvaluation(Request $request){ 
     header("Access-Control-Allow-Origin: *"); 
     $data = json_decode($request->getContent(), true); 
     dump($data);die; 
    } 

當我嘗試轉儲數據值就返回null對象！請任何幫助！

Answer 1

有幾個問題與代碼的規定，可能會導致此問題：

1. HTML元素<option>似乎並不具備value屬性。如果沒有value，就不會有任何可以根據選定值傳遞給API的內容。
2. ngModel目前沒有做任何事情，因爲它沒有單向[]或雙綁定[()]語法綁定到某些組件類屬性。

嘗試建立一個模型來表示表單數據：

export class Foo { 
    constructor(
    public sku: string, 
    public note1: string, 
    public note2: string, 
    public note3: string 
) { } 
} 

然後在EvalEnCoursComponent一些默認/空值創建模型的實例：

import { Foo } from './Foo'; 

export class EvalEnCoursComponent implements OnInit { 
    model = new Foo('', '', '', ''); 
    // rest of code 
} 

在您的形式，更新ngModel以利用雙向綁定來確保模型屬性在更改/選擇/等事件上更新爲每個input/select。否則，你需要從#f形式對象中提取使用類似FormData表單值：

<div class="field"> 
    <label for="skuInput">SKU</label> 
    <input type="text" 
     id="skuInput" 
     placeholder="SKU" 
     name="sku" [(ngModel)]="model.sku"> 
</div> 

另外要確保你的<select>元素<options>實際上有value性質：

<select class="form-control" name="note2" id="select2" ngModel> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    </select> 

最後上提交，將this.model傳遞給服務而不是表單實例本身：

savePostEvaluation(): void { 
    this.evaluationService.savePostEvaluationService(this.model) 
     .subscribe(data => console.log(data)); 
} 

利用類或接口來表示表單數據模型將爲您提供對結構的更多控制，並使用雙向數據綁定將自動更新模型的值。

希望這有助於！